vue-cli 环境变量

Posted 2021-07-11 奥特曼　

环境变量

在项目开发期间可能，我们可能发送ajax到一个地址，项目上线后又换另一个地址，我们呢又不希望每次去手动切换地址，所以这时候就用到了环境变量

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

环境变量的配置文件

一、   .env.development 开发环境配置文件

当运行npm run dev 的时候会以此文件为配置，这个文件中可以针对开发环境配置的变量

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'  

#代表注释   运行 npm run  dev

 

二、  .env.production  生产环境配置文件

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

运行 npm run build:prod        生成dist目录

 

三、  .env.test       测试环境运行配置文件

ENV = '测试环境的基地址'
VUE_APP_BASE_API = 'http://www.xxxxxxx.com/api'

运行 npm run build:test

什么时候用测试环境 待补

数据更真实，开发环境下满足不了我们的需求 ，例如上万条数据库，只能在测试环境上运行 ，

在vue.config.js的配置文件中

const port = process.env.port || process.env.npm_config_port || 9528

在request.js中

const service = axios.create({
  // baseURL: 'http://ihrm-java.itheima.net', // 设置axios请求的基础的基础地址
  baseURL: process.env.VUE_APP_BASE_API // 设置axios请求的基础的基础地址
  // timeout: 5000 // 定义5秒超时
})

 

process.env 实际上是一个nodejs服务下的环境变量* 我们可以在main.js输出一下

console.log(process.env)

总结

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

2.设置环境变量，我们可以在不同的环境下使用不同axios基地址

3.只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过process.env.环境变量名 访问 ，

4.设置配置文件后要重新启动服务器