Today, the leader asked to support the subcontracting configuration of a certain project. Emmm, after referring to the subcontracting operations of other projects in the company, I followed the gourd and stepped on several pitfalls in the middle, and simply recorded the process.
1. Pull code and install dependencies
Hahaha, I stepped on the pit when I came up. After I pulled the code, I straightened it up, and then a bunch of dependencies reported errors. I found out that my colleague added a dependency package. I didn't know it, and then I installed the dependencies obediently. I want to emphasize here, ***If there is no cross-env dependency, remember to install it, if there is no cross-env dependency, remember to install it, if there is no cross-env dependency, remember to install it,* **Important things are said three times. If you are uneasy, subcontracting will not fix it. The shell command is pasted: npm install --save-dev cross-env After the installation is successful, there will be more "cross-env": "^7.0.3" in the package.json, the configuration item, that's right. If it doesn't work, Otherwise, try global installation, npm install -g cross-env, anyway, global installation is definitely possible,
2. Configure environment variables
This is also a pitfall. The project I want to change does not have an environment variable configured. I didn’t find it at first. Later, I didn’t load the corresponding routes in different environments, so I found out that this is the pitfall. There is also a package directory name that can be matched or not, but it is recommended to configure it.
The following configuration in vue.config.js
let projectName = process.env.PROJECT_NAME || "All"; //获取名称
module.exports = {
publicPath: './',
outputDir: "dist/" + projectName + "/", //打包后的项目目录名称，建议这样修改
productionSourceMap: false,
lintOnSave: false,
devServer: {
//自己公司项目自己配置哈
},
chainWebpack: config => {
// 设置环境变量
config.plugin("define").tap(args => {
args[0]["process.env"].PROJECT_NAME = JSON.stringify(
process.env.PROJECT_NAME
);
return args;
});
}
}
3. Disassemble the route
Separate the routes to be subcontracted in router.js in the project into different files. For example, I have disassembled the front and rear 9 in the picture. Subsequent different packaging commands will load the corresponding routes in these nine files. . There is a question here, that is, whether the sub-routing can be dismantled, you can try it. I took away the parent-child route of a module in a package. Here are two file routes for your reference
//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"),
},
]
}
]
Fourth, configure the config.js file
config.js is mainly to judge different environments and load the nine different routes that were just disassembled
//config.js
let options={
"routersName":[],//路由文件名列表
"menuFlag":"",//显示的功能列表标识
}
if(process.env.PROJECT_NAME=='All'){
options.menuFlag="All"
options.routersName=[
...require("@/plugins/vueRouter/all.js").default
]
}else if(process.env.PROJECT_NAME=='potential'){
options.menuFlag="potential"
options.routersName=[
...require("@/plugins/vueRouter/potential.js").default,
]
}else if(process.env.PROJECT_NAME=='mobile'){
options.menuFlag="mobile"
options.routersName=[
...require("@/plugins/vueRouter/mobile.js").default,
]
}else if(process.env.PROJECT_NAME == 'credit'){
options.menuFlag="credit"
options.routersName=[
...require("@/plugins/vueRouter/credit.js").default,
]
}else if(process.env.PROJECT_NAME == 'loan'){
options.menuFlag="loan"
options.routersName=[
...require("@/plugins/vueRouter/loan.js").default,
]
}else if(process.env.PROJECT_NAME == 'sign'){
options.menuFlag="sign"
options.routersName=[
...require("@/plugins/vueRouter/sign.js").default,
]
}else if(process.env.PROJECT_NAME == 'track'){
options.menuFlag="track"
options.routersName=[
...require("@/plugins/vueRouter/track.js").default,
]
}else if(process.env.PROJECT_NAME == 'approval'){
options.menuFlag="approval"
options.routersName=[
...require("@/plugins/vueRouter/approval.js").default,
]
}else if(process.env.PROJECT_NAME == 'main'){
options.menuFlag="main"
options.routersName=[
...require("@/plugins/vueRouter/main.js").default,
]
}
export default options
5. Modify 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,...config.routersName] //路由表合并
console.log(routes,'routerjs中本身的路由')
console.log(config,'config中获取的路由')
console.log(process.env.PROJECT_NAME,'环境变量')
const router = new VueRouter({
// mode: 'hash',
base: process.env.BASE_URL,
routes
});
//如果你的项目中有其他的逻辑 再自行添加哈
// ...........其他业务逻辑代码
In the part of merging the routing table, I originally wanted to try to take out the child route separately, and put the parent route in router.js, but I feel that it is not elegant enough to put it in the children, so I simply put path: "/main" Both the parent route and the sub-routes in children are removed.
6. Configure package.json
Finally, we have reached this step. This step is to configure the shell command.
For the convenience of copying, I will post the command code in the scripts in package.json for everyone. Other configurations should not be posted by me.
//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"
},
Ok, let's try running different commands. I repeatedly reported some inexplicable errors, and reinstalled cross-env several times. I tried both globally and locally. Another example is that dev doesn’t work, but dev:main does. I deleted node-modules and re-downloaded the dependencies, and it worked. Huh~~~~ It's finally done, I hope everyone can avoid some pitfalls, bye~~~