Vue多页应用如何按环境配置vue.config.js 实现生产环境移除admin页面

两种需求都可以实现，优先推荐在同一份vue.config.js中添加环境判断的方案，维护成本更低。

方案1：单配置文件动态生成pages配置 #

vue.config.js是运行在Node.js环境的配置文件，可直接通过process.env.NODE_ENV读取当前环境变量，Vue CLI会自动在开发服务启动时将该值设为development，生产构建时设为production，无需额外配置。
修改后的配置如下：

// 定义所有环境通用的页面配置
const pages = {
  index: "src/main.js"
}

// 仅开发环境加入admin页面配置
if (process.env.NODE_ENV === 'development') {
  pages.admin = {
    entry: "src/main-admin.js",
    template: "public/index.html",
    filename: "admin"
  }
}

module.exports = {
  productionSourceMap: false,
  pages: pages
};

修改完成后执行生产构建时，admin页面不会被打包到最终产物中，开发环境仍可正常访问admin页面。

方案2：多环境独立配置文件 #

如果项目不同环境的配置差异很大，也可以拆分独立的配置文件：

1. 在项目根目录新建两份配置文件：vue.config.dev.js（保留admin页面的开发配置）、vue.config.prod.js（移除admin页面的生产配置）
2. 修改package.json中的脚本命令，通过--config参数指定对应环境的配置文件即可：

{
  "scripts": {
    "serve": "vue-cli-service serve --config vue.config.dev.js",
    "build": "vue-cli-service build --config vue.config.prod.js"
  }
}

注意：该方案需要同步维护两份配置的公共部分，通用配置修改时需要两边同步，仅适合配置差异极大的场景使用。

内容的提问来源于stack exchange，提问作者sigmaxf