如何在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文件的变量（即.env.development.local）不会覆盖另一个env文件（即.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开箱即用的实际默认模式。我们只是明确设置了模式。