使用Vue webpack模板实现环境无关的构建

Question

我使用一个构建服务器来构建我的Vue项目，使用Vue 2模板提供的npm run build命令。Vue模板还提供了访问特定于环境的数据的能力，这些数据可以在config目录下的文件中进行配置，如prod.env.js等文件。然后，您可以通过process.env.API_PREFIX访问此数据，如模板手册所示。

我想能够构建代码一次，然后将相同的构建（由Dist中的输出所定义）部署到多个服务器，但是不同的服务器要使用不同的配置（不同的API_PREFIX等）。目前，Webpack编译器在构建时会扩展process.env引用。因此，我必须为每个环境重新构建。

我可以想到几种方法来做到这一点--显然，配置的加载必须在运行时发生，并且由于它在浏览器中运行并且必须引用某个文件，因此必须通过AJAX请求访问由Web服务器单独提供的一些静态JSON配置或类似的方式。但我很想知道这里的任何人如何处理这个要求。

- amoe

---

有一些技巧，但需要更多信息来确定API_PREFIX。它是否与应用程序将要访问的域名有关？你能给出具体的例子吗？ - aristidesfl

是的，API前缀是每个环境特定的配置数据示例。对于每个部署环境，它将是不同的域。例如，在“staging”部署环境的构建中，API前缀可能是https://staging-api.mycompany.com。[尽管原则上不能从环境名称推导出它]。 - amoe

Answer 1

没有了解你的具体架构，因此很难给出具体建议。相反，我会留下一些一般性的想法。

为了以明智的方式完成你想要的事情，你可能需要从提供前端服务的域中派生前缀。

除了在运行时使用 window.location 之外，还有一些可以用于此目的的东西：

• 相对路径 /api/myinformation - 前缀将自动从提供前端服务的域派生。
• 在开发过程中使用本地代理，因为你可能不想在本地主机上运行后端 https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
• 在 nginx 或类似的服务器上进行代理路径重写：https://dev59.com/QXA75IYBdhLWcg3w8-BJ#3017720

即使它不能解决你的具体情况，希望它能给你提供一些可用的想法。

- aristidesfl

---

我的问题实际上与API前缀无关，它只是一个我想在构建过程后参数化的配置片段的偶发示例。我有许多其他与部署环境相关的事情，与前缀无关。我需要一种通用的方法来在运行时读取配置变量。 - amoe

问题在于你想在哪里、何时以及如何编写它们，基于哪些标准。如果没有更具体的用例描述，很难提供更具体的想法。 - aristidesfl

我认为我已经决定使用Webpack externals、全局脚本标签和一个在“static”目录下的文件来定义window对象上的配置。这在运行时被评估，但仍以一种看似同步的方式带入Webpack上下文中。 - amoe

除了使用全局脚本标签包含文件以外，不确定使用webpack externals能带来什么好处，因为您只是在谈论一些变量，而不是一个已经存在的包。 - aristidesfl

你说得对，直接在模块中访问存储在“window”上的全局配置与从“my-config”导入配置相比实际上没有太大的区别。只是心理上感觉通过“import myconfig from 'my-config'”更加清晰，而不是到处引用“window.myconfig”。 - amoe