Vue为不同环境设置不同的vue.config.js配置

Question

我有一个多页应用程序，我需要一些页面仅在我的开发环境中显示。 这是我的 vue.config.js：

module.exports = {
  productionSourceMap: false,

  pages: {
    index: "src/main.js",
    admin: {
      entry: "src/main-admin.js",
      template: "public/index.html",
      filename: "admin"
    }
  }
};

我需要将索引页面转到我的生产版本，但要从中删除管理员。 有没有办法在 vue.config.js 上添加环境条件配置，或者为每个环境添加一个 vue.config.js？

Answer 1

vue.config.js是 javascript，所以你几乎可以在里面做任何你想做的事情。 在您的情况下，您可以执行以下操作：

let config = {
  productionSourceMap: false,
  pages: {
    index: "src/main.js",
  }
}

if (process.env.NODE_ENV != 'production') {
  config.pages.admin = {
    entry: "src/main-admin.js",
    template: "public/index.html",
    filename: "admin"
  }
}

module.exports = config

如果您需要比“内置” production 、 development等更多的环境，您可以通过创建.env文件来创建自己的.env ，例如包含NODE_ENV=myenv名为.env.myenv的文件

https://cli.vuejs.org/guide/mode-and-env.html#modes