持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情---

概要

为啥子要了解环境变量呢?

因为前端项目启动时,我们要在vue.config.js中配置定义占用端口号

因为

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

在开发阶段，所有ajax请求要发到地址a；在上线之后，所有ajax请求要发到地址b 如何自动切换呢？就是要设置环境变量

配置

在.env.devlopment 文件中设置

#开发环境的基础地址
VUE_APP_BASE_API = 'http://XXXX ' 地址

在.env.production 文件中设置

#生产环境的基地址
VUE_APP_BASE_API = 'http://XXXX ' 地址

而在 request.js文件中创建axios实例中设置基地址

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

打包时使用 npm run build:prod , 生产 dist目录

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

下图是开发环境服务端口的在vue.config.js中位置

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

在一些特殊的配置文件中定义环境变量


文件名称	对应环境	运行命令
.env.development	开发环境	当运行命令为 npm run dev
.env.production	生产环境	运行命令为 npm run build:prod
.env.staging	模拟生产环境	是production环境的镜像,尽最大的可能来模拟产品线上的环境

它们是在 package.json 配置文件里看的

编辑

总结通过不同的命令,自动加载不同的配置文件,从而就得到了不同的环境变量

了解完配置文件,接下来便了解怎么来定义环境变量

1.格式 : key = value

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

自定义环境变量都是以 VUE_APP_ XXX 开头的 # 是这里的注释符号

定义好环境变量那要怎么使用呢?

定义好环境变量之后,项目启动后,它会自动被集成到 process.env 这个属性中

因为我们只需要在 vue.config.js 这个配置文件中输入以下代码使用

process.env.环境变量名

要注意一点 : 修改服务的配置文件,必须要重启服务,才会生效,我相信你们肯定知道这个知识点

不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量
开发环境 - > development的文件生产上线 -> production的文件
key = value 定义环境变量 process.env.环境变量名字
自定义的环境变量要以：VUE_APP_开头

就是在不同的环境下使用不同axios基地址