一、什么是process
process对象是一个全局变量,提供了有关当前Node.js进程的信息并对其进行控制。常用于Vue项目中环境区分,对不同环境的配置不同,例如:根据全局变量区分请求的url地址、是否开始eslint、不同环境的特殊配置等等。
可以在项目中新建js文件,输出process,得到一个配置对象。过多就仅展示部分截图:
二、如何使用process进行环境的区分
Vue项目中有三个模式:production、development、test
1.模式
在vue-cli中模式是一个重要的概念,默认情况下有三个模式。
对于下面所说的命令,大家可以看一下项目中的package.json文件,一看就明白了
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:unit
- test 模式用于 vue-cli-service test:unit
development模式对应我们开发环境对应的命令是 serve命令,也就是说我们启动项目后就在development模式下运行
production模式对应打包命令build。打包后在production模式下运行
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:
vue-cli-service build --mode development
总结,可以通过命令动态配置,配置对于模式下对应那些配置。
我们一般通过.env文件进行请求地址的配置,例如存在多个地址的情况,可以通过命令进行灵活配置。
2.process.env环境对象
在不同的模式会有不同的环境变量
在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production模式下 NODE_ENV 的值会被设置为 “production”
3..env文件的执行顺序
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件研发环境 加载顺序:.env .env.development 同一个变量名 后者会覆盖前者
生产环境 加载顺序:.env .env.production 同一个变量名 后者会覆盖前者
三、 process的使用
1.用于不同环境请求地址的区分
新建.env文件,例如.env.development,在development环境下会载入该文件声明的变量。
以VUE_APP_开头的变量会被webpack.definePlugin 静态嵌入到客户端侧的包中,访问时 process.env.VUE_APP_SECRET,添加变量直接以VUE_APP_* 的形式就可
# just a flag
NODE_ENV = 'development'# base api
VUE_APP_BASE_API = 'http://10.0.0.165:9588'
然后请求url就可以拿到对应的值了
const service=axios.create({
baseURL: process.env.VUE_APP_BASE_API,//请求地址
timeout: 10000,//请求超时时间,如果超给改时间会中断
// headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})