vue多环境配置之.env配置文件怎么使用

前言： 在Vue项目中，我们可能会有多个不同的环境，比如开发环境、测试环境和生产环境等。为了方便地切换和配置这些环境，Vue提供了一种简单而灵活的方式来管理不同的环境配置，就是通过使用.env配置文件来实现。 使用.env配置文件主要有两个作用：一是可以在不同的环境中配置不同的变量值，比如API接口的地址，第三方服务的密钥等；二是可以避免敏感信息（比如密钥）暴露在代码仓库中，因为.env文件是在项目构建时被忽略的。 如何使用： 1. 创建.env文件：在Vue项目的根目录下创建一个.env文件。需要注意的是，.env文件的名字是固定的，不能改变。如果需要配置多个环境，可以创建多个.env文件，以.env.xxx的形式命名（xxx是环境的标识）。同时，需要将.env文件添加到.gitignore文件中，防止被提交到代码仓库中。 2. 配置变量：在.env文件中，可以按照key=value的形式配置变量。每一行代表一个变量的配置，可以根据需要添加多个配置项。比如，可以配置一个BASE_URL变量，用来存放API接口的根地址。

VUE_APP_BASE_URL=http://api.example.com

需要注意的是，变量名必须以`VUE_APP_`开头，这是为了区分Vue应用中的普通环境变量。 3. 使用环境变量：在Vue项目中，可以通过`process.env`对象访问配置的环境变量。在代码中使用环境变量时，只需要使用`process.env.VUE_APP_`开头的变量名即可。比如，可以在axios配置中使用`process.env.VUE_APP_BASE_URL`来获取API接口的地址。

import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;

4. 切换环境：默认情况下，Vue会读取根目录下的.env文件，即.env文件中的配置项在所有环境中都起作用。如果需要切换到其他环境，可以在启动命令中使用`--mode`参数指定环境名。比如，可以使用`npm run serve -- --mode=development`来启动开发环境。 总结： 通过使用.env配置文件，我们可以方便地管理多个环境下的配置变量，同时避免了敏感信息的暴露。在实际使用中，只需要按照上述步骤创建.env文件并配置变量，然后在代码中通过`process.env`对象来访问变量即可。通过切换启动命令的方式，我们可以轻松地切换不同的环境，保证每个环境下的配置生效。