2023.25 vue项目实现多页面打包

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

使用场景：

本来是两个菜单的东西，用户想要把两个菜单拆成两个页面进行部署，这时就会用到多入口页面的知识。

实现方式：

借助vue-cli配置项pages实现，官网文档链接。优点：资源可以共用，一劳永逸，执行一次npm run build就可以实现

具体实现：

无脑方式：注释掉原来的菜单，执行npm run build打包两个不一样的包。缺点：相同资源不能共用，浪费内存，每次需要手动执行两次打包命令，容易出错。

• 准备模板文件：public文件夹下复制两个index.html文件，改名为pageA.html,pageB.html，并将里面div的id改为pageA和pageB
• 准备入口文件：也就是main.js，现在我们需要准备两个入口文件，分别为pageA.main.js和pageB.main.js，内容和main.js一致，但是需要修改Vue的模板挂载的对象改为第一步修改的id，也就是pageA和pageB
• 配置vue.config.js文件的pages选项

    pages: {
        pageA: {
            title: pageTittle,
            entry: 'src/pageA.main.js',
            template: 'public/pageA.html'
        },
        pageB: {
            title: pageTittle,
            entry: 'src/pageB.main.js',
            template: 'public/pageB.html'
        }
    },

此时已经准备好打包配置和入口文件以及模板文件了，但是此时两个文件里面内容是一样的,如果不想要两个页面共用一套路由和菜单，需要自己根据变量来判断区分是pageA还是pageB，我这边用的是将区分入口的变量挂载到vue的原型上，这样我们在页面中就可以使用this.xxx来访问了
main.js中增加以下代码

//自定义全局属性
Vue.prototype.$pageTarget = 'pageA'

然后菜单就可以根据$pageTarget来过滤和生成

接下来还有一个问题，main.js中将挂载对象改为了pageA和pageB，同时我们不想改变APP.vue的情况下，可以动态生成id，这样就可以实现用同一套模板根据配置不同来生成两个不一样的打包文件

最终生成的文件目录

image.png