使用webpack将一个项目中的多个Vuejs组件发布到npm

我试图发布一个项目，以包含两个或更多的VUE组件的npm，所以我可以导入，注册和使用这样的组件：

import Component1 from 'npm-package' import Component2 from 'npm-package' 

这是我的webpack文件：

 const webpack = require('webpack'); const merge = require('webpack-merge'); const path = require('path'); var config = { output: { path: path.resolve(__dirname + '/dist/'), }, module: { loaders: [ { test: /\.js$/, loader: 'babel', include: __dirname, exclude: /node_modules/ }, { test: /\.vue$/, loader: 'vue' }, { test: /\.css$/, loader: 'style!less!css' } ] }, externals: { moment: 'moment' }, plugins: [ new webpack.optimize.UglifyJsPlugin( { minimize : true, sourceMap : false, mangle: true, compress: { warnings: false } } ) ] }; module.exports = [ merge(config, { entry: path.resolve(__dirname + '/src/plugin.js'), output: { filename: 'vue-project.min.js', libraryTarget: 'window', library: 'VueProject', } }), merge(config, { entry: path.resolve(__dirname + '/src/index.js'), output: { filename: 'vue-project.js', libraryTarget: 'umd', library: 'vue-project', umdNamedDefine: true }, resolve: { extensions: ['', '.js', '.vue'], alias: { 'src': path.resolve(__dirname, '../src'), 'components': path.resolve(__dirname, '../src/components') } } }) ]; 

这是我用作构build过程的入口点的index.js文件

 import Component1 from './components/folder1/Component1.vue' import Component1 from './components/folder2/Component2.vue' export default { components: { Component1, Component2 } } 

使用npm run build的构build过程正常工作，我可以发布项目到npm并使用npm install进行安装。 导入和使用它工作正常，但是当我运行我的项目我得到的错误：

无法装入组件：模板或渲染function未定义。 所有其他发现有关此错误的post并没有解决我的问题，因为他们都没有试图导出多个组件。

当我在两个不同的项目中发布它们时，这两个组件完全按照预期工作

我在这里错过了什么？ 提前致谢！

Answer 1

您不需要使用components属性进行导出，只需执行以下操作：

 export { Component1, Component2 } 

你会然后做：

 import {Component1} from 'npm-package'; import {Component2} from 'npm-package'; 

要么

 import {Component1, Component2} from 'npm-package'; 

请参阅： https ： //developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export