Vue2系列：vue多个项目共享开发和单个项目独立打包的解决方案

由于在实际项目中有几个项目高度相似，想法是通过一个vue项目 来打包、启动不同的项目，这样便于管理，避免项目的频繁切换

如图创建文件目录

以项目A(deploy) 为例

将根路径的项目结构放到单独的项目中

创建两个文件

projects.js, vue.config.js

// projects.js
const config = {
  // 可自定义更改
  dep: {
    pages: {
      index: {
        // 目录路径正确即可
        entry: "src/apps/deploy/main.js",
        // template: "src/apps/deploy/index.html",
        filename: "index.html",
      },
    },
    outputDir: "dist/dep/",
  },
  dev: {
    pages: {
      index: {
        entry: "src/apps/develop/main.js",
        // template: "src/apps/deploy/index.html",
        filename: "index.html",
      },
    },
    outputDir: "dist/dev/",
  },
};

module.exports = config;

// vue.config.js
const config = require("./projects.js");
let projectName = process.env.PROJECT_NAME;
module.exports = {
  ...config[projectName],
};

配置package.json

    "build:dep": "cross-env PROJECT_NAME=dep vue-cli-service build",
    "serve:dep": "cross-env PROJECT_NAME=dep vue-cli-service serve --open",
    "build:dev": "cross-env PROJECT_NAME=dev vue-cli-service build",
    "serve:dev": "cross-env PROJECT_NAME=dev vue-cli-service serve --open"

全局安装 cross-env

npm i cross-env

运行、打包

npm run serve:dev
npm run build:dev