Webpack 使用vue cli配置特定于环境的变量

我正在尝试找出如何将使用vue cli 3生成的vue应用程序部署到生产环境中。我计划将其作为静态文件托管（这不是服务器端代码）。我需要在我的代码中根据当前环境（开发与生产）设置某些变量。这些包括api URL和身份验证信息（这些信息都不是秘密的）

这样做的最佳方式是什么

---

以下是vue cli 3的配置文档：

您只需将变量添加到现有的

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

中配置环境变量，使配置值成为

过程的一部分。env

对Max Sinev的答案进行轻微更新

//vue.config.js
module.exports={
链接网页包：配置=>{
config.plugin（“define”）.tap（args=>{
让_base=args[0][“process.env”]；
args[0][“process.env”]={
(完)，
“API_URL”：JSON.stringify（process.env.URL），
};
返回args；
});
}
}

---

现在可以通过

process.env.API\u URL

访问

API\u URL
您必须使用VUE\u APP（）启动变量名。
请共享您的网页配置。如果没有，则需要一个才能使用
DefinePlugin
。（）由于我使用的是vue cli，所以网页包配置是隐藏的，但是可以使用vue.config.js-file配置它。包含的链接中列出了此文件的可能选项。