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

Question

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

最好的方法是什么？

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

- Sebastian

---

请分享你的webpack配置。如果你没有配置，你需要一个才能使用DefinePlugin。（https://webpack.js.org/plugins/define-plugin/） - sdgluck

webpack配置文件被隐藏了，因为我正在使用vue-cli，但是可以通过vue.config.js文件进行配置。该文件的可能选项在链接中列出。 - Sebastian

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文件中配置环境变量。

- Max Sinev

Answer 2

您必须以VUE_APP为前缀来命名变量(https://cli.vuejs.org/guide/mode-and-env.html)

- Sebastian

Answer 3

要使配置值成为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;
    });
  }
}

现在可以通过process.env.API_URL访问API_URL。

- nilobarp

---

我尝试过，现在 API_URL 似乎可以作为 API_URL 访问了。 - librajt