vue3配置多页面重要步骤之自动读取

如果要增加页面就在vue.config.js文件里面的pages选项里面增加就好了，但是如果一个一个的手动增加，感觉麻烦，也容易出错，那就再简单的配置一下自动读取到pages文件夹里面有哪些页面。
1.首先安装glob模块，接下来会用到。
npm install glob
2.在src同级目录新建utils文件夹，里面新建utils.js文件

const PAGE_PATH = './src/pages';  // 注意是./ 而不是../ 这可能和commen.js的加载有关系

module.exports = {
    getPages: () => {
        
        //  首先得到包含pages文件夹里面符合条件的路径数组
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');

        //  pages就是vue.config.js里面pages选项的值，是一个对象
        let pages = {};

        //  遍历得到的路径数组，从字符串中分割出需要的页面名字
        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()
}

到这里一个简单的多页面项目就算配置完了，之前也用vue-cli2配置过多页面应用，感觉vue-cli3比之前要方便也更容易配置。