webpack 按需打包vue项目，根据不同业务模块打包成不同包

需求

开发的项目需要每个页面打包成一个项目，给第三方平台上线

实现原理

把router.js分成好几个不同的路由router.js。
问题：
入口main.js引用了router.js 也要每次都切换router.js来打包，这样main.js的代码并不好维护。
解决方案
1.我们可以同样把main.js 拆成 main_page1.js 和 main_page2.js,注意不同的main.js里面引用不同的router.js，然后使用webpack的特性mode来读取不同的main.js
2.首先在package.json所在的根目录下新建 .env.page1 和 .env. page2两个文件
分别写上代码：

VUE_APP_PROJECT_NAME = "page1"
NODE_ENV = "production"

VUE_APP_PROJECT_NAME = "page2"
NODE_ENV = "production"

3.然后在vue.config.js中写入

const outputDir = `dist/${
     process.env.VUE_APP_PROJECT_NAME}/`
module.exports = {
   
 outputDir: outputDir, //构建输出目录
  <