Vue项目分包打包配置（包含dev)全过程

 let projectName = v.PROJECT_NAME || "All";  //获取名称
ports = {publicPath: './',outputDir: "dist/" + projectName + "/", //打包后的项目目录名称，建议这样修改productionSourceMap: false,lintOnSave: false,devServer: {//自己公司项目自己配置哈},chainWebpack: config => {// 设置环境变量config.plugin("define").tap(args => {args[0][&#v"].PROJECT_NAME = JSON.v.PROJECT_NAME);return args;});}
}

三、拆路由

把项目中router.js中的要分包的路由分别拆到不同的文件中，例如我图中就拆了前后9个，后续不同的打包命令，就会加载这九个文件中的对应的路由。此处有个疑问，就是能不能拆分子路由的问题，大家可以试试。我是把一个模块的父子路由打包带走的。此处就放两个文件路由大家参考一下

//sign.js
export default[{path: "/main",name: "main",meta: { cachePage: true },component: () => import("@/views/main/main.vue"),children: [{path: "/other",name: "other",component: () => import("@/views/login/other"),},/* 贷款签约 */{path: "/loanSigning",name: "loanSigning",meta: { cachePage: true, showMain: true },component: () => import("@/views/loanSigning/index"),},{path: "/loanSigningEdit",name: "loanSigningEdit",meta: { showBack: true },component: () => import("@/views/loanSigning/loanSigningEdit"),},{path: "/loanSigningRead",name: "loanSigningRead",meta: { showBack: true },component: () => import("@/views/loanSigning/loanSigningRead"),},  ]}
]
```javascript```javascript
//track.js
export default[{path: "/main",name: "main",meta: { cachePage: true },component: () => import("@/views/main/main.vue"),children: [{path: "/other",name: "other",component: () => import("@/views/login/other"),},/* 轨迹视图 */{path: "/trackView",name: "mobileMarketing",meta: { cachePage: true, showMain: true },component: () => import("@/views/trackView/index"),},{path: "/trackViewAdd",name: "trackViewAdd",meta: { showBack: true },component: () => import("@/views/trackView/trackViewAdd"),}, ]}
]

四、配置config.js文件

config.js主要是判断不同的环境下，加载刚才拆的那九个不同的路由

//config.js
let options={"routersName":[],//路由文件名列表"menuFlag":"",//显示的功能列表标识}
v.PROJECT_NAME=='All'){uFlag="All&#utersName=[...require("@/plugins/vueRouter/all.js").default]
}else v.PROJECT_NAME=='potential'){uFlag="potential&#utersName=[...require("@/plugins/vueRouter/potential.js").default,]   
}else v.PROJECT_NAME=='mobile'){  uFlag="mobile&#utersName=[...require("@/plugins/vueRouter/mobile.js").default,]   
}else v.PROJECT_NAME == 'credit'){uFlag="credit&#utersName=[...require("@/plugins/vueRouter/credit.js").default,]   
}else v.PROJECT_NAME == 'loan'){uFlag="loan&#utersName=[...require("@/plugins/vueRouter/loan.js").default,]   
}else v.PROJECT_NAME == 'sign'){uFlag="sign&#utersName=[...require("@/plugins/vueRouter/sign.js").default,]   
}else v.PROJECT_NAME == 'track'){uFlag="track&#utersName=[...require("@/plugins/vueRouter/track.js").default,] 
}else v.PROJECT_NAME == 'approval'){uFlag="approval&#utersName=[...require("@/plugins/vueRouter/approval.js").default,] 
}else v.PROJECT_NAME == 'main'){uFlag="main&#utersName=[...require("@/plugins/vueRouter/main.js").default,] 
}
export default options

五、修改router.js

//router.js
import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/plugins/vuex/store";
import config from "../../config"   //这个路径要以你的项目路径来哈，自行修改
Vue.use(VueRouter);
let routes=[{ path: "/", name: "index", redirect: "/login" },{path: "/login",name: "login",meta: { cachePage: true },component: () => import("@/views/login/login.vue"),}//要拆包的那些路径，都要删了哈，不然分包就分个寂寞啦！！！！！！！！]routes=[...routes,...utersName] //路由表合并
console.log(routes,'routerjs中本身的路由')
console.log(config,'config中获取的路由')
console.v.PROJECT_NAME,'环境变量')
const router = new VueRouter({// mode: 'hash',base: v.BASE_URL,routes
});
//如果你的项目中有其他的逻辑  再自行添加哈
// ...........其他业务逻辑代码

在合并路由表那块 ，我本来想试试子路由单独拿出来，父路由还放在router.js中的，但是我感觉往children里面塞，也不够优雅，就索性把 path: "/main"这个父路由和children里的子路由都拆走了

六、配置package.json

终于到了这一步，临门一脚了，这一步就是配置shell命令了

为了方便复制，我把package.json里scripts里面的命令代码给大家贴出来，其他的配置应该不用我贴了吧

//package.json中的命令"scripts": {"dev": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env PROJECT_NAME=All vue-cli-service serve","dev:main": "cross-env PROJECT_NAME=main vue-cli-service serve","dev:potential": "cross-env PROJECT_NAME=potential vue-cli-service serve","dev:mobile": "cross-env PROJECT_NAME=mobile vue-cli-service serve","dev:credit": "cross-env PROJECT_NAME=credit vue-cli-service serve","dev:loan": "cross-env PROJECT_NAME=loan vue-cli-service serve","dev:sign": "cross-env PROJECT_NAME=sign vue-cli-service serve","dev:track": "cross-env PROJECT_NAME=track vue-cli-service serve","dev:approval": "cross-env PROJECT_NAME=approval vue-cli-service serve","build": "cross-env PROJECT_NAME=All vue-cli-service build","build:potential": "cross-env PROJECT_NAME=potential vue-cli-service build","build:main": "cross-env PROJECT_NAME=main vue-cli-service build","build:mobile": "cross-env PROJECT_NAME=mobile vue-cli-service build","build:credit": "cross-env PROJECT_NAME=credit vue-cli-service build","build:loan": "cross-env PROJECT_NAME=loan vue-cli-service build","build:sign": "cross-env PROJECT_NAME=sign vue-cli-service build","build:track": "cross-env PROJECT_NAME=track vue-cli-service build","build:approval": "cross-env PROJECT_NAME=approval vue-cli-service build","lint": "vue-cli-service lint"},

好了，运行不同的命令试试吧。我反反复复有些莫名的报错，重装cross-env也反复好几次，全局的，局部都试过。再比如 dev 不行，dev：main就可以，我就删除了node-modules，重新下载了依赖，就可以了。 呼~~~~ 终于搞定了，希望大家能少走一些坑，拜拜~~~