Vue3 - 项目配置多环境配置文件

最常见的多环境配置，就是开发环境配置,和生产环境配置(也就是上线的配置)，很多情况下我们开发环境下的域名，和一些配置项,和我们生产模式下的不同，这个时候就需要我们进行多环境配置，不然每次发版都要改一波数据多麻烦。

另一种情况就是你两个项目是用的一套代码，但是最后又要分别打成不同的包，那么这个时候多环境配置就大大提升了开发效率。

创建配置文件

首先，您需要在 Vue3 项目中创建不同环境的配置文件，在项目根目录下创建 .env 文件和 .env.xxx 文件，其中 xxx 是环境名称。

最常见的就是这三种配置.env.dev, .env.test, .env.prod，分别代表开发环境、测试环境、线上环境配置文件。

如下图所示：

配置环境变量

在创建了环境配置文件后，您可以在这些文件中定义不同环境下的环境变量和配置选项。

例如：

开发环境配置

# .env.dev
VUE_APP_BASE_URL=http://localhost:8080

线上环境配置