如何在Vue-cli3中覆盖环境变量？

Question

让我们假设我们使用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
• .env.development
• .env.production
• .env.local
• .env.development.local
• .env.production.local

.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文件，它不起作用。

Answer 1

您可以在npm脚本中传递--mode选项。因此，在您的实例中，您可能希望serve脚本看起来像：

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

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

vue-cli-service serve --mode development

serve确实是使用CLI 3时即用的实际默认模式。我们已经明确设置了模式。