Vue 设置环境变量和模式

Vue 允许对环境进行多种情况的配置,在运行命令不同的情况下,调用的环境变量是不同的。

让我们考虑在项目中有 2 个环境配置文件。

  • .env
  • .env.production

开发的环境配置如下:

2024-05-17_15-19-24

对我们开发来说,我们最重要的是需要知道在我们运行的时候调用的是那个配置文件。

简单办法就是在 在 main.js 中通过控制台输出下看看:

在 main.js 中我们添加下面 2 行代码。

console.log("ENV>>>> ", process.env.NODE_ENV);
console.log("APP SEVER>>>> ", process.env.VUE_APP_SERVER);

随后我们运行程序,我们可以看到上面的输出为。

通过上面的配置,我们可以了解到针对本地的运行我们应该调用的是 development 环境的配置文件。

但是我们没有配置 development 的配置文件,那么默认就会调用 .env 这个配置文件。

启动脚本

我们也可以在启动脚本中添加 --mode 参数来确定启动模式。

例如使用下面的代码:

vue-cli-service serve --mode dev

来确定启动模式为 development。

1 Like