使用 vue-cli 配置环境特定变量

Question

我想弄清楚如何将使用 vue-cli 3 生成的 vue 应用程序部署到生产环境中。我计划将其托管为静态文件（即没有服务器端代码）。我需要根据当前环境（开发与生产）在我的代码中设置某些变量。这些包括 api-url 和身份验证信息（none 其中是机密）。

最好的方法是什么？

以下是 vue-cli 3 的配置文档：https://cli.vuejs.org/config/

Answer 1

您可以使用 chainWebpack:

将变量添加到现有的 DefinePlugin 配置中

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
          args[0] = {
             ...args[0],
             "MY_API_URL": JSON.stringify(process.env.URL),
             // other stuff
          }
          return args
       })
  }
}

并在.env中配置环境变量。

Answer 2

要使配置值成为 process.env 的一部分，对 Max Sinev 的回答稍作更新

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      let _base = args[0]["process.env"];
      args[0]["process.env"] = {
        ..._base,
        "API_URL": JSON.stringify(process.env.URL),
      };
      return args;
    });
  }
}

现在 API_URL 可以作为 precess.env.API_URL

访问

Answer 3

变量名必须以 VUE_APP (https://cli.vuejs.org/guide/mode-and-env.html)

开头

使用 vue-cli 配置环境特定变量

Configure environment specific variables using vue-cli

webpack

vue.js

vue-cli