Vue-cli 环境变量

为了方便我们设置数据，脚手架提供了环境变量功能，可以用来保存任何数据，开发中保存基地址居多，鉴于此我们可以把环境变量理解为一个变量就可以了

2个环境

1. 开发环境（development）：

   1. npm run serve是开发环境
   2. 正在编码，代码还没有写好

2. 生产环境（production）：

   1. npm run build生产环境（打包上线）

   2. 代码写好了，项目打包的时候，代码会被部署到线

3. 后端 接口也有2个环境

   • 接口地址是二种
     • 开发环境
       • 设置一个基地址
     • 生产环境
       • 修改该基地址

定义

1. 开发环境定义
   1. 创建一个.env.development 后缀名的文件
   2. 在该文件下可以定义一些开发环境使用的全局变量
      1. 名字有一个规则 必须 VUE_APP_开头
2. 生产环境
   1. 创建一个.env.production 后缀名的文件
   2. 在该文件下可以定义一些生产环境使用的全局变量
      1. 名字有一个规则 必须 VUE_APP_开头

使用

固定写法：process.env.变量名（VUE_APP_开头的变量）

注意点

1. 如果修改了.env.development内部的值，必须重新npm run serve
2. 键值对必须以固定值开头
3. 任意的代码中都可以获取
4. 访问的方式通过process.env
5. 不要在html里面使用process.env.VUE_APP_名字