發佈多個Vuejs組件在一個項目中使用的WebPack

我試着去項目發佈到包含兩個或兩個以上的Vue組件，以便我可以導入，註冊和使用這樣的兩個組件NPM新公共管理：發佈多個Vuejs組件在一個項目中使用的WebPack

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') 
     } 
    } 
    }) 
];

，這是index.js文件我使用爲切入點構建過程

import Component1 from './components/folder1/Component1.vue' 
import Component1 from './components/folder2/Component2.vue' 

export default { 
    components: { 
    Component1, 
    Component2 
    } 
}

使用npm run build的構建過程可以正常工作，我可以將該項目發佈到npm並使用npm install進行安裝。導入和使用它可以正常工作，但是當我運行我的項目時出現錯誤：

未能裝入組件：未定義模板或渲染函數。發現有關此錯誤的所有其他帖子並未解決我的問題，因爲他們中沒有人試圖導出多個組件。

當我在兩個不同的項目中發佈它們時，這兩個組件都完全按預期工作。

我在這裏失蹤了什麼？提前致謝！

來源

2017-10-18 Leon Schaffert

你不需要使用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

來源

2017-10-18 13:31:01

仍然導致無法裝入組件：模板或渲染函數未定義錯誤，並且不顯示任何內容。 –

你是如何使用這些組件的？你有沒有爲你的Vue實例定義一個渲染函數？您可能還想查看我爲我的軟件包編寫的webpack配置，以查看它是否可以幫助您識別問題：https://github.com/craigh411/vue-rate-it/blob/master/config/webpack .dist.js –

感謝您的參考，我將盡力讓它明天與新的輸入工作！ –

發佈多個Vuejs組件在一個項目中使用的WebPack

回答

相關問題