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

Question

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

这样做的最佳方法是什么？

以下是 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中配置环境变量。