一. 认识环境变量

1. 端口配置

前端项目启动时，占用端口号是在vue.config.js配置的

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址：cli.vuejs.org/zh/

上面的 process.env.port实际上是一个nodejs服务下的环境变量

2. 环境变量的配置文件

在以下配置文件中定义环境变量

在项目运行的过程中，通过不同的命令，能自动加载不同的配置文件，从而获取不同的环境变量

二. 配置环境变量

1. 定义环境变量-示例

key = value key表示环境变量的名称 value表示环境变量的值

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'
复制代码

以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，建议以它开头来定义

VUE_APP_NUM = 2000
复制代码

使用环境变量

定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可

process.env.环境变量名
复制代码

修改服务的配置文件，想要生效的话，必须要重新启动服务

vue-cli 环境与变量官网 : https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

2. 配置不同的请求基地址

在项目开发的不同阶段，很可能要请求不同的基地址，例如：

在开发阶段，所有ajax请求要发到地址a；

在上线之后，所有ajax请求要发到地址b

1. 配置

.env.devlopment

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api'
复制代码

.env.production

# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'  
复制代码

2. 使用环境变量

const service = axios.create({
  // baseURL: 'http://ihrm-java.itheima.net'
  baseURL: process.env.VUE_APP_BASE_API
})
复制代码