【VUE项目维护】多个项目提取共用组件的解决方案

需求场景

通常开发项目，会有多个管理后台或者相似的项目，我们无需每次都重新创建vue-cli脚手架。我们可以将多个项目放在同一个脚手架里，统一管理。

合并项目

1. 目录结构

2. 相关文件配置

• appConfig.js文件，此文件是两个项目的配置文件，最后会插入到vue.config.js文件里

  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]
  

• vue.config.js

  // vue.config.js 通过读取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
  };
  

• dev.js文件

  const appName = process.argv[2] // node config/dev.js cangjie 拿到命令行 node命令行的第二个参数也就是star
  
  const fs = require("fs") // 引入文件模块
  
  fs.writeFileSync("./config/app.js", `exports.name = "${appName}"`) // 将模块名称写入文件app.js
  
  const exec = require("child_process").execSync; // 开启一个子进程
  exec("npm run serve", { stdio: "inherit" }); // 执行vuecli3.0+ 的启动脚本
  

• build.js文件

  // build.js 打包文件 和dev文件几乎一致，不做过多解释
  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" });
  
  

• app.js

  // app.js 很简单，抛出模块的名称
  exports.name = "cangjie"
  

• package.json文件配置执行命令

  // 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"
    }
  

3. 执行命令

npm run dev:cangjie 

npm run build:cangjie 这样就可以了

4. 梳理一下流程

1. npm run dev:cangjie
2. 读取dev文件
3. 将star写入app.js
4. 执行 npm run serve
5. 读取vue.config.js文件
6. 在vue.config.js中读取appConfig文件拿到相应项目配置
7. 执行项目编译操作，并且启动项目