vue应用构建过程中如何根据环境变量设置api路径？答案

【问题标题】：How to set an api path during the build process of a vue application based on environment variable?vue应用构建过程中如何根据环境变量设置api路径？
【发布时间】：2018-07-18 00:16:07
【问题描述】：

我想知道是否有办法更改我网站的 api 的“根路径”，它是 vue 应用程序中构建时变量的字符串值。我希望在构建过程中读取并设置我的 api 路径的值。这个功能存在于angular中，我想知道它是否存在于vue中。我检查了文档，没有看到任何类似的东西。这个blog 描述了我在角度上追求的功能。如果没有类似的东西，如何在构建时将 api 的根路径从例如“localhost:8080”更改为“example.mysite.com”，以便在构建/部署到生产时设置正确的路径而不需要要手动更改？感谢您的帮助！

【问题讨论】：

我们可以看看你现在用什么来捆绑你的代码吗？以及您在 package.json 中定义的scripts？有几种方法可以做到这一点。

标签： vue.js

【解决方案1】：

您可以在构建期间将其设置在环境变量中，并通过process.env.MY_VARIABLE 访问它。

在开发过程中，您将使用像 https://www.npmjs.com/package/dotenv 这样的包并拥有一个包含环境变量的 .env 文件，但在生产中，您需要在 CI 或构建脚本中设置它。

请记住，如果这是基于浏览器的，那么您将需要替换 process.env 带有显式值的引用，您可以对大多数捆绑程序执行此操作。

【讨论】：