Vue/Webpack 中的多个 .env.development 配置答案

【问题标题】：Multiple .env.development configs in Vue/WebpackVue/Webpack 中的多个 .env.development 配置
【发布时间】：2020-04-24 00:46:59
【问题描述】：

我觉得这不应该是一件难事，但我无法让它运行。

我想为我的本地 Vue.js 项目（使用 vue-cli 3）设置两个不同的配置。

所以，我想要.env.development-1 和.env-development-2 或类似的东西；只是一种在两个相同的配置文件之间快速切换的方法。

我读过关于构建模式等的文章，但这些文章似乎都针对“构建”。我只想用不同的配置运行本地开发服务器。

我将如何解决这个问题？

【问题讨论】：

这取决于你如何构建你的 Vue 应用程序。如果它使用vue-cli 看看cli.vuejs.org/guide/mode-and-env.html#modes 。
我读过那个，但它没有回答我的任何问题。这就是我所说的“一切似乎都在构建一些东西，但我只想用不同的配置运行我的开发服务器”。据我了解，我可以使用不同的模式进行构建，但我也可以使用不同的模式运行开发服务器吗？我没看到在哪里提到这个
在你的应用程序运行之前（通过npm run dev 或serve），它首先被构建（通过webpack），所以那些ENV 变量将被注入到你的代码中。这正是你所需要的......
你们是对的......它完全有效：D 谢谢！

【解决方案1】：

感谢我原始帖子下的 cmets，我发现解决方案实际上非常简单：

我刚刚创建了一个.env.staging，VUE_APP_API_URL 指向登台服务器，其他一切都一样

然后

"scripts": {
    "serve:local": "vue-cli-service serve",
    "serve:staging": "vue-cli-service serve --mode staging",
}

它有效。

首先我必须围绕这个概念展开思考。谢谢！

【讨论】：