Demand scenarios

Often development projects have multiple administrative backends or similar projects, so we don’t have to recreate vue-CLI scaffolding every time. We can put multiple projects in the same scaffold and manage them uniformly.

Merger projects

1. Directory structure

2. Configure related files

  • The appconfig.js file, which is the configuration file for both projects, will be inserted into the vue.config.js file

    const appName = require("./app.js") const path = require("path") function resolve(dir) { return path.join(__dirname, dir) } const config = { cangjie: { pages: { index: { entry: "src/app/cangjie/main.js", template: "public/cangjie.html", filename: "index.html" } }, outputDir: "dist/cangjie/", devServer: {}, chainWebpack: (config) => { config.entry.app = ["babel-polyfill", "../src/app/cangjie/main.js"] config.resolve.alias.set("@", resolve(".. /src/app/cangjie/")) } }, weixin: { pages: { index: { entry: "src/app/weixin/main.js", template: "public/weixinIndex.html", filename: "index.html", } }, outputDir: "dist/weixin/", devServer: {}, chainWebpack: (config) => { config.entry.app = ["babel-polyfill", "../src/app/weixin/main.js"] config.resolve.alias.set("@", resolve(".. /src/app/weixin/")) } } } module.exports = config[appName.name]Copy the code

  • vue.config.js

    // vue.config.js configures the project by reading appConfig const conf = require('./config/appConfig'); module.exports = { pages: conf.pages, publicPath: './', outputDir: conf.outputDir, assetsDir: 'static', devServer: conf.devServer, productionSourceMap: false, chainWebpack: conf.chainWebpack, configureWebpack: conf.configureWebpack };Copy the code

  • Dev. Js file

    Const appName = process.argv[2] // node config/dev.js cangjie Star const fs = require("fs") // Introduce file module fs.writefilesync ("./config/app.js", // exports.name = "${appName}") // exports.js const exec = require("child_process").execsync; // Create a subprocess exec(" NPM run serve", {stdio: "inherit"}); // execute the vuecli3.0+ startup scriptCopy the code

  • Build the js file

    // the build.js package is almost identical to the dev file, Const appName = process.argv[2] const fs = require("fs") fs.writefilesync ("./config/app.js", `exports.name = "${appName}"`) const exec = require("child_process").execSync; exec("npm run build", { stdio: "inherit" });Copy the code

  • app.js

    // app.js is very simple, throw module name exports.name = "cangjie"Copy the code

  • Package. json file configuration execution command

    // package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    "dev:star": "node config/dev.js cangjie",
    "dev:country": "node config/dev.js weixin",
    "build:star": "node config/build.js cangjie",
    "build:country": "node config/build.js weixin"
  }
Copy the code

3. Run the command

npm run dev:cangjie 

NPM run build:cangjie

4. Comb through the process

1. NPM run dev:cangjie 2. 4. Run NPM run serve 5. Js file 6. Read appConfig file in vue.config.js to get the corresponding project configuration 7. Perform the project compile operation and start the projectCopy the code