Vue-cli腳手架構建多頁面專案
阿新 • • 發佈:2019-01-30
一、建立專案
vue init webpack ma
二、修改build資料夾下的utils.js
1、 引入glob外掛
程式碼:var glob = require('glob')
2、 在utils.js文件的底部加入這段程式碼(用於獲取多個入口檔案):
//獲取多級的入口檔案
exports.getMultiEntry = function (globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-4);
var pathsrc = tmp[0]+'/'+tmp[1];
if( tmp[0] == 'src' ){
pathsrc = tmp[1];
}
//console.log(pathsrc)
pathname = pathsrc + '/' + basename; // 正確輸出js和html的路徑
entries[pathname] = entry;
//console.log(pathname+'-----------'+entry);
});
return entries;
}
三、修改build資料夾下的webpack.base.conf.js
刪除這段程式碼entry: {app: './src/main.js'},,更換為以下程式碼
module.exports = {
···
entry: utils.getMultiEntry('./src/views/**/*.js'),
···
}
四、修改build資料夾下的webpack.dev.conf.js
1、將下面的程式碼註釋掉:
更換為如下程式碼:
new webpack.optimize .CommonsChunkPlugin({
name: 'vendor',
chunks: chunks,
minChunks: 4 || chunks.length
}),
2、在檔案底部加入這段程式碼:
var pages =utils.getMultiEntry('./src/views/**/*.html')
for(var page in pages) {
// 配置生成的html檔案,定義路徑等
var conf = {
filename: page + '.html',
template: pages[page], //模板路徑
inject: true,
// excludeChunks 允許跳過某些chunks, 而chunks告訴外掛要引用entry裡面的哪幾個入口
// 如何更好的理解這塊呢?舉個例子:比如本demo中包含兩個模組(index和about),最好的當然是各個模組引入自己所需的js,
// 而不是每個頁面都引入所有的js,你可以把下面這個excludeChunks去掉,然後npm run build,然後看編譯出來的index.html和about.html就知道了
// filter:將資料過濾,然後返回符合要求的資料,Object.keys是獲取JSON物件中的每個key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
console.log(page);
// 需要生成幾個html檔案,就配置幾個HtmlWebpackPlugin物件
module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}
五、修改build資料夾下的webpack.prod.conf.js
1、加入這段程式碼:
程式碼如下:
var entries = utils.getMultiEntry('./src/'+'views'+'/**/**/*.js'); // 獲得入口js檔案
var chunks = Object.keys(entries);
2、將這段程式碼註釋掉:
3、將這段程式碼註釋掉:
4、在檔案底部加入這段程式碼:
var pages = utils.getMultiEntry('./src/views/**/*.html')
for(var page in pages) {
// 配置生成的html檔案,定義路徑等
var conf = {
filename: page + '.html',
template: pages[page], // 模板路徑
chunks: ['vendor',page], // 每個html引用的js模組
inject: true, // js插入位置
hash:true
};
// 需要生成幾個html檔案,就配置幾個HtmlWebpackPlugin物件
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}