使用Vue webpack模板的独立于环境的构建

Question

我使用构建服务器来构建我的Vue项目，使用由Vue 2模板很好地提供的npm run build命令。 Vue模板还提供访问可在config目录下的文件中配置的环境特定数据的功能。比如prod.env.js等。然后，您可以通过process.env.API_PREFIX访问该数据，如模板手册中所示。

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

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

Answer 1

不知道你的具体架构很难给出具体的建议。相反，我会留下一些一般的想法。

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

有几件事情，你可以使用，除了在运行时使用window.location：

• 相对路径/api/myinformation - 前缀将在前台是在服务的域名自动导出。
• 发展过程中的本地代理，因为你可能不希望在nginx的或类似的本地主机上运行的后端https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
• 代理路径重写：https://stackoverflow.com/a/3017720/1445812

即使它不解决您的具体情况，希望它给你一个可用的概念。