时间戳

首页 > 解决方案 > 如何覆盖 Vue-cli3 中的环境变量？

vue.js - 如何覆盖 Vue-cli3 中的环境变量？

问题描述

假设我们有一个使用 Vue-cli3 和 package.json 构建的 Vue.js 项目：

{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", ... }

此外，我们计划将我们的项目推送到 GitHub 上的公共存储库，因此我们需要不同的环境变量用于公共存储库和本地开发。Vue-cli 3 给了我们modes：https ://cli.vuejs.org/guide/mode-and-env.html#modes

我有这样的文件：

.env 的内容：

NODE_ENV=production VUE_APP_PATH=http://website.com/ VUE_APP_API_ROUTE=api/v1/

.env.development 的内容：

NODE_ENV=development VUE_APP_PATH=http://dev-website.com/

.env.development.local 的内容：

NODE_ENV=development VUE_APP_PATH=http://localhost:8080/

当我这样做时，npm run serve我希望process.env.VUE_APP_PATH会是平等的http://localhost:8080/，但不幸的是它仍然是 = http://dev-website.com/。所以，问题是来自本地环境文件（即.env.development.local）的变量不会被另一个环境文件（即.env.development）覆盖。

如何使用这种 vue-cli 方法覆盖必要的变量？该文档讲述了优先级：An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).但是对于 .local 文件，它不起作用。

标签： vue.jsvue-cli-3

解决方案

--mode您可以在 npm 脚本中传递选项。因此，在您的实例中，您可能希望serve脚本如下所示：

vue-cli-service serve --mode development.local

如果您想测试为您的非本地开发配置提供服务，您可以复制serve脚本并重命名它serve:local，然后将原始serve脚本编辑为如下所示：

vue-cli-service serve --mode development

这实际上是serveCLI 3 开箱即用的实际默认模式。我们刚刚明确设置了模式。

推荐阅读