如果要增加頁(yè)面就在vue.config.js文件里面的pages選項(xiàng)里面增加就好了锰霜，但是如果一個(gè)一個(gè)的手動(dòng)增加，感覺麻煩桐早，也容易出錯(cuò)，那就再簡(jiǎn)單的配置一下自動(dòng)讀取到pages文件夾里面有哪些頁(yè)面。
1.首先安裝glob模塊哄酝，接下來(lái)會(huì)用到友存。
npm install glob
2.在src同級(jí)目錄新建utils文件夾，里面新建utils.js文件
const PAGE_PATH = './src/pages'; // 注意是./ 而不是../ 這可能和commen.js的加載有關(guān)系
module.exports = {
getPages: () => {
// 首先得到包含pages文件夾里面符合條件的路徑數(shù)組
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');
// pages就是vue.config.js里面pages選項(xiàng)的值陶衅，是一個(gè)對(duì)象
let pages = {};
// 遍歷得到的路徑數(shù)組屡立，從字符串中分割出需要的頁(yè)面名字
entryHtml.forEach((filePath) => {
let fileName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));
// 組建pages需要的值
pages[fileName] = {
entry: `src/pages/${fileName}/${fileName}.js`,
template: `src/pages/${fileName}/${fileName}.html`,
filename: `${fileName}.html`
}
});
return pages;
}
};
然后在vue.config.js里面引入
// vue.config.js
const utils = require('./utils/utils');
module.exports = {
baseUrl: './',
pages: utils.getPages()
}
到這里一個(gè)簡(jiǎn)單的多頁(yè)面項(xiàng)目就算配置完了，之前也用vue-cli2配置過(guò)多頁(yè)面應(yīng)用搀军，感覺vue-cli3比之前要方便也更容易配置膨俐。
