Vue-cli3 project optimization multi-project shared configuration, component dynamic packaging node command

The cause of

Two days ago, I was working on a VUE project. There were many interactions and similar requirements in the requirements of two independent projects. The actual project may end up sharing many pages or components. But because of the specificity of some of the requirements, the two projects cannot be completely combined. So Baidu came up with two projects, a set of configuration and common components, preview and package results through node command control. We also thought about deploying public components to private CNPMS, but many of them are related to the business aspects of the company. Our private CNPMS just want to store some public methods, front-end encapsulation components and so on, so we chose to control through node command.

The solution

1. Create a command file

• Create one in the root directoryscriptsfolder
• inscriptsCreated in themultiProjectConfigMulti-project configuration folder
• inmultiProjectConfigIn the newserve.jsTo place the project serve command configuration code
• inmultiProjectConfigIn the newbuild.jsTo place the project build command configuration code
• inmultiProjectConfigIn the newprojectEnter.jsTo place the project entry configuration code for use by other files in the project
• inmultiProjectConfigIn the newprojectPages.jsTo place the project root page configuration code
  

  

serve.js

Argv for example, 'NPM run serves WebApp DEV' let projectName = process.argv[2]; // WebApp - let env = process.argv[3]; // let fs = require("fs"); // let fs = require("fs"); fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`); Let exec = require("child_process"). ExecSync; exec("npm run serve:" + env, { stdio: "inherit" });Copy the code

build.js

Argv builds WebApp DEV 'let projectName = process.argv[2]; // WebApp - let env = process.argv[3]; // let fs = require("fs"); // let fs = require("fs"); fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`); Let exec = require("child_process").execsync; exec("npm run build:" + env, { stdio: "inherit" });Copy the code

These two files are basically the same, if extreme can even be reduced to a file, also command control serve or build;

projectPages.js

Const projectName = require("./projectEnter"); const config = { WebApp: { name: "WebApp", pages: { index: { entry: "src/projects/WebApp/main.js", template: "public/index.html", filename: "index.html", title: "*****", }, } }, TodoList: { name: "TodoList", pages: { index: { entry: "src/projects/TodoList/main.js", template: "public/index.html", filename: "index.html", title: "*****",}}}}; const configObj = config[projectName.name]; module.exports = configObj;Copy the code

The file above will eventually be used in vue.config.js;

vue.config.js

// vue.config.js const path = require("path") const multiProjectConfig = require("./scripts/multiProjectConfig/projectPages") module.exports = { outputDir: ".. /.. /.." + pathBuild, publicPath: pathBuild, productionSourceMap: false, transpileDependencies: ["@cttq"], devServer: { host: "0.0.0.0}, pages: multiProjectConfig pages, chainWebpack: (config) => { config.resolve.alias .set("@publicC", path.join(__dirname, "src/components")) .set("@publicA", path.join(__dirname, "src/assets")) .set("@", path.join(__dirname, "src/projects/WebApp")) .set("@assets", path.join(__dirname, "./src/projects/WebApp/assets")) .set("@components", path.join(__dirname, "./src/projects/WebApp/components")) .set("@plugins", path.join(__dirname, "./src/projects/WebApp/plugins")) .set("@style", path.join(__dirname, "./src/projects/WebApp/style")) .set("@utils", path.join(__dirname, "./src/projects/WebApp/utils")) .set("@img", path.join(__dirname, "./src/projects/WebApp/assets/images")) }, }Copy the code

2. Build a new project directory

Make it simple and post a picture… Lazy lazy

3. Modify package.json command serves and builds

"scripts": {
	"serve": "vue-cli-service serve",
	"serve:DEV": "vue-cli-service serve --mode DEV",
	"serve:QAS": "vue-cli-service serve --mode QAS",
	"serve:PRE": "vue-cli-service serve --mode PRE",
	"serve:PRD": "vue-cli-service serve --mode PRD",
	"build": "vue-cli-service build",
	"build:DEV": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --mode DEV --report",
	"build:QAS": "vue-cli-service build --mode QAS",
	"build:PRE": "vue-cli-service build --mode PRE",
	"build:PRD": "vue-cli-service build --mode PRD",
	"lint": "vue-cli-service lint",
	"new:comp": "node ./scripts/generateComponent/index",
	"new:view": "node ./scripts/generateView/index",
	"serves": "node ./scripts/multiProjectConfig/serve.js",
	"builds": "node ./scripts/multiProjectConfig/build.js"
},
Copy the code

And so on and so forth, from the command line, you can control the projects and environments that need to be debugged and packaged using the Node command. npm run serves WebApp DEV npm run builds TodoList DEV

---

The above is the multi-project shared configuration, component dynamic packaging node command, please comment more.