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, //构建输出目录
  pages: {
    index: {
      // page 的入口
      entry: 'src/main_' + process.env.VUE_APP_PROJECT_NAME +'.js',
    },
  },

4.在package.json的script中写入

    "build_page1": "vue-cli-service build --mode page1",
    "build_page2": "vue-cli-service build --mode page2",

当执行 build_page1的时候，mode为page1。webpack会去找.env.page1文件。将其中的内容覆盖掉
process.env 的对象字面量。然后 entry指向到main_page1.js 下。main_page1.js指向 router_page1.js。
router_page1.js中含有page1页面，则打包的时候，只有page1页面进入了最终的dist文件夹。实现了对页面级的按需打包。

目录结构

想要根据不同环境变量，打不同的项目包，
2个页面就有2个环境变量.env.page1 和 .env. page2，那10几个页面不是有10几个.env.xxxx文件吗？
区分不同main.js和router.js,这部分文件也多
页面好冗余的样子,这样不行后期不好维护，业务越多，文件也越来越多，那我想想怎么优化

.env.xxxx这个环境变量代码文件能不要了吗？于是想办法发现了cross-env

cross-env

1、什么是cross-env?
它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。
2.作用？
cross-env 能够提供一个设置环境变量的scripts（重点）

yarn add cross-env

于是 我们可以不用设置.env.page1 和 .env. page2可以删掉这2个文件，该用下面配置,就很香

"build_page1": "cross-env VUE_APP_PROJECT_NAME=page1 vue-cli-service build",
"build_page2": "cross-env VUE_APP_PROJECT_NAME=page2 vue-cli-service build"

区分不同main.js和router.js,这部分文件能不要了吗？

那我们是不是通过设置的环境变量来剔除多余的路由，留下想要构建的页面路由就好了呢？于是在router.js里面加上一下代码

if (process.env.NODE_ENV !== "development") {//打包部署的时候按不同环境变量匹配不同路由打包不同模块，本地开发的时候所有路由都存在可以访问方便本地开发
	routes = routes.filter((item) => {
	  item.path = "/"//将当前匹配上的路由path改为/ 就能实现访问项目直接到这个页面
	  return item.name === process.env.VUE_APP_PROJECT_NAME
	})
}

最终版代码

注意事项：尽量保存页面名称，环境变量，路由的name 名称保持一致
1.package.json
先下载cross-env 然后设置打包的环境变量及命令

yarn add cross-env

"build_page1": "cross-env VUE_APP_PROJECT_NAME=page1 vue-cli-service build",
"build_page2": "cross-env VUE_APP_PROJECT_NAME=page2 vue-cli-service build"

2.修改vue.config.js
根据不同的命令打包出不同项目包

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

3.修改router.js

if (process.env.NODE_ENV !== "development") {//打包部署的时候按不同环境变量匹配不同路由打包不同模块，本地开发的时候所有路由都存在可以访问方便本地开发
	routes = routes.filter((item) => {
	  item.path = "/"//将当前匹配上的路由path改为/ 就能实现访问项目直接到这个页面
	  return item.name === process.env.VUE_APP_PROJECT_NAME
	})
}

最终就能实现根据不同命令打包不同路由到项目包