使用Vue webpack模板进行环境独立构建

Question

我使用构建服务器来构建我的Vue项目,使用npm run buildVue 2模板提供的命令.Vue模板还提供了访问可在目录下的文件中配置的特定于环境的数据的功能config.喜欢的东西prod.env.js,等你再通过访问该数据process.env.API_PREFIX模板手动所见.

我希望能够构建一次代码,然后将相同的构建(由输出定义Dist)部署到多个服务器,但让不同的服务器使用不同的配置(不同的API_PREFIX等).目前,process.envWebpack编译器在构建时扩展了引用.因此,我必须为每个环境重建.

我可以想到几种方法来实现这一点 - 显然配置的加载必须在运行时进行,并且鉴于它在浏览器中运行并且必须引用某个文件,它必须通过AJAX请求Web服务器单独或类似地提供的一些静态JSON配置.但我有兴趣知道这里有人会如何处理这个要求.

Answer 1

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

为了以合理的方式执行您想要的操作，您可能必须从为前端提供服务的域中派生前缀。

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

• 相对路径/api/myinformation- 前缀将自动从前端所在的域中派生。
• 开发期间的本地代理，因为您可能不想在本地主机上运行后端https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
• nginx 或类似的代理路径重写：/sf/answers/211240431/

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