vue|vue-cli 环境变量 vue.js|前端|html5|html|vue|vue复用

环境变量 【vue|vue-cli 环境变量】在项目开发期间可能，我们可能发送ajax到一个地址，项目上线后又换另一个地址，我们呢又不希望每次去手动切换地址，所以这时候就用到了环境变量
在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。

文章图片

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

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

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

#代表注释运行 npm rundev

二、.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.设置配置文件后要重新启动服务器