vue-cli多頁面配置
對于vue-cli的基礎(chǔ)配置可以參考我的這篇blog vue-cli的基礎(chǔ)運用
閱讀本文需要了解的知識點
- webpack的基本配置
entry,output,plugin - ES6 的基本用法
- 文件的導(dǎo)入和導(dǎo)出
1.目錄結(jié)構(gòu)的調(diào)整
目錄結(jié)構(gòu).png
源文件下面的src分三個部分
- components : 存放單頁面組件和整體公用的的組件
- modules : 存放整體的模塊部分
- pages : 存放頁面刀诬，每一個頁面的內(nèi)容按照就近原則進行匹配
- 把原來的單頁面的入口文件
main.js改成index.js审轮，并放入到pages中的index文件夾 - index文件夾中存放的是首頁的以前單頁面的內(nèi)容（router铲觉，assets,
APP.vue）
- 把原來的單頁面的入口文件
2.修改單頁面的webpack的入口文件
修改之前
webpack.base.conf.js的基本配置
// webpack編譯的基本配置
module.exports = {
entry : {
app: './src/main.js' //單頁面的入口文件
},
...
}
下面用到的glob模塊解釋
// js/try js文件夾下面的try文件夾里面的a.js b.js c.js 不能含有子目錄(try里面的子目錄的js讀取不了)
var PAGE_PATH = path.resolve(__dirname,'./js');
const entryFiles = glob.sync(PAGE_PATH + '/*/*.js'); //輸出的是一個數(shù)組
[ 'C:/Users/Z7/Desktop/glob/js/tyr/a.js',
'C:/Users/Z7/Desktop/glob/js/tyr/b.js',
'C:/Users/Z7/Desktop/glob/js/tyr/c.js' ]
在utils.js中添加方法作瞄，來配置多個入口
// 引入讀取文件名的glob模塊 (不用安裝菜拓，已經(jīng)被隱形安裝過)
var glob = require('glob') // 讀取文件名的模塊
var PAGE_PATH = path.resolve(__dirname,'../src/pages') //入口文件頁面路徑
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') // 讀取pages下面的文件夾里面的.js文件
return entryFiles.reduce((obj,filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
obj[filename] = filePath
},{})
}
修改webpack.base.conf.js的入口,這樣就有多個頁面的入口了蹬跃，下面修改多個頁面的輸出
module.exports = {
entry: utils.entries(),
....
}
3.修改頁面的輸出配置
修改之前，webpack.dev.conf.js的配置和webpack.prod.conf.js的配置
// 頁面的輸出通過webpack的html-webpack-plugin插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins：[
...
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
我們需要修改它的輸出多個頁面厢呵。在utils.js中添加方法窝撵，來配置多個入口
// 多頁面的輸出配置
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');
let arr = [];
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/')+1, filePath.lastIndexOf('.'))
var conf = {
template: filePath,
filename: filename+ '.html',
chunks: [filename],
inject: true
}
if(process.env.NODE_ENV === 'production') {
conf = merge(conf, {
chunks: ['manifest','vendor',filename],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttrubuteQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr;
}
修改build/webpack.dev.conf.js和build/webpack.prod.conf.js的配置：把原有的頁面模板配置注釋或刪除，并把多頁面配置添加到plugins
webpack.dev.conf.js：
plugins: [
...
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
].concat(utils.htmlPlugin())
webpack.prod.conf.js
plugins: [
...
// new HtmlWebpackPlugin({
// filename: config.build.index,
// template: 'index.html',
// inject: true,
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },
// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),
].concat(utils.htmlPlugin())
4.運用頁面
- npm run dev
- npm run build
打包后的文件：
打包后的文件.png
