使用 Vue webpack 模板与环境无关的构建答案

【问题标题】：Environment independent builds using the Vue webpack template使用 Vue webpack 模板与环境无关的构建
【发布时间】：2017-07-07 07:44:42
【问题描述】：

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

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

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

【问题讨论】：

有一些技巧，但需要更多关于如何确定 API_PREFIX 的信息。它与将要访问应用程序的域有关吗？能举出具体的例子吗？
是的，API 前缀是特定于每个环境的配置数据示例。对于每个部署环境，这将是一个不同的域。例如，在 staging 部署环境的构建中，API 前缀可能是 https://staging-api.mycompany.com。 [虽然原则上不能从环境名称推导出来。]

标签： javascript deployment build webpack vue.js

【解决方案1】：

在不了解您的具体架构的情况下很难给出具体建议。相反，我会留下一些一般性的想法。

为了以一种理智的方式做你想做的事，你可能必须从你服务于前端的域中派生前缀。

除了在运行时使用 window.location 之外，您还可以使用一些东西：

相对路径 /api/myinformation - 前缀将自动从提供前端服务的域派生而来。
开发期间的本地代理，因为您可能不想在 localhost https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md 上运行后端
nginx 或类似的代理路径重写：https://stackoverflow.com/a/3017720/1445812

即使它不能解决您的具体情况，也希望它能让您了解可用的方法。

【讨论】：

我的问题并不是关于 API 前缀，这只是我想在构建过程之后参数化的配置的一个附带示例。我还有许多其他与前缀无关的部署环境特有的东西。我需要一种在运行时读取配置变量的通用方法。
问题是您想在何处、何时以及如何编写它们。基于哪些标准。如果没有更具体的用例描述，很难给出更具体的想法。
我想我已经决定使用 Webpack 外部组件、全局脚本标签和 static 目录下的文件来定义 window 对象上的配置。这是在运行时评估的，但仍然以一种看起来是同步的方式带入 webpack 上下文。
不确定使用 webpack 外部组件可以获得什么，除了使用全局脚本标签包含文件之外，因为您谈论的只是几个变量，而不是现有包。
你是对的，与直接在模块中直接访问存储在window 上的全局配置并没有太大的真正区别。只是在心理上感觉import myconfig from 'my-config' 比在任何地方都引用window.myconfig 更干净。