vue 3.0 实现多页面应用

多页面的实现，主要是动态配置vue.config.js的page属性。我们来看看如何实现
1.我们看下目录结构

image.png

projectList   //所有多页面的存放
    projectA   //单个页面
        main.js   //入口
        index.html //渲染模版
    projectB
       main.js
       index.html

2.根据上面的这个文档结构，我们需要通过glob插件动态获取main.js以及index.html的文件路径。当然我们也可以直接在vue.config.js中这样配置

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

如果我们写死的话，页面少很方便，但是页面一多，那就难搞了。
所以我们回到正题
3.在根目录新建productConfig.js

var glob = require("glob");
// 生成入口文件配置 
let entryConfig = {
   moduleList:[],
   // 开发的页面配置  默认是编译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;
   },
   ///根据传入的参数来决定要打包哪个页面/项目
   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];  //拿到动态打包项目的参数
module.exports={
    pages:isProduct? entryConfig.createEntryConfig_build(buildProjectName):entryConfig.createEntryConfig_dev(),
    outputDir:"dist/"+buildProjectName,//打包文件的存放地址
    configureWebpack:config=>{
        //production
        if(isProduct){
            console.log("生产环境打包")
            config.plugins.push(new htmlWebpack({
                filename:"index.html",
                template:`./src/projectList/${buildProjectName}/index.html`,
                title:`${buildProjectName}打包的页面`,
                inject:true,
                chunks:[]
            }))
        }
    }
}

本地运行: 就直接 npm run serve
打包生产: 如果你想打包projectA 就 npm run build projectA
希望可以帮到你！！