多頁面的實現(xiàn)，主要是動態(tài)配置vue.config.js的page屬性。我們來看看如何實現(xiàn)
1.我們看下目錄結(jié)構(gòu)

image.png

projectList   //所有多頁面的存放
    projectA   //單個頁面
        main.js   //入口
        index.html //渲染模版
    projectB
       main.js
       index.html

2.根據(jù)上面的這個文檔結(jié)構(gòu)，我們需要通過glob插件動態(tài)獲取main.js以及index.html的文件路徑。當(dāng)然我們也可以直接在vue.config.js中這樣配置

pages:{
    projectA:{
     entry:"./src/projectA/main.js"
    } 
}

如果我們寫死的話，頁面少很方便，但是頁面一多，那就難搞了。
所以我們回到正題
3.在根目錄新建productConfig.js

var glob = require("glob");
// 生成入口文件配置 
let entryConfig = {
   moduleList:[],
   // 開發(fā)的頁面配置  默認(rèn)是編譯projectList下所有的子項目 
   createEntryConfig_dev() {
      let entryList = {};
      // 獲取所有的moduleList
      glob.sync('./src/projectList/**/*').forEach(item => {
         let projectName = item.split('/')[3];
         if (!this.moduleList.includes(projectName)) {
            this.moduleList.push(projectName)
         }

      });
      for (const name of this.moduleList) {
         entryList[name] = {
            'entry': `./src/projectList/${name}/main.js`,
         }
      }
      console.log("result", entryList)
      return entryList;
   },
   ///根據(jù)傳入的參數(shù)來決定要打包哪個頁面/項目
   createEntryConfig_build(projectName){
      console.log(projectName,"projectname")
      let entryList = {};
      entryList[projectName] = {
         'entry': `./src/projectList/${projectName}/main.js`,
      }
      return entryList;
   }


}
module.exports = entryConfig;

4.在vue.config.js中引入生成的pages配置即可

const entryConfig=require("./productConfig")
var htmlWebpack=require("html-webpack-plugin");
var isProduct=process.env.NODE_ENV=="production"?true:false
// entryConfig.createEntryConfig();
var buildProjectName=process.argv[3];  //拿到動態(tài)打包項目的參數(shù)
module.exports={
    pages:isProduct? entryConfig.createEntryConfig_build(buildProjectName):entryConfig.createEntryConfig_dev(),
    outputDir:"dist/"+buildProjectName,//打包文件的存放地址
    configureWebpack:config=>{
        //production
        if(isProduct){
            console.log("生產(chǎn)環(huán)境打包")
            config.plugins.push(new htmlWebpack({
                filename:"index.html",
                template:`./src/projectList/${buildProjectName}/index.html`,
                title:`${buildProjectName}打包的頁面`,
                inject:true,
                chunks:[]
            }))
        }
    }
}

本地運行: 就直接 npm run serve
打包生產(chǎn): 如果你想打包projectA 就 npm run build projectA
希望可以幫到你??！