vue-cli4/vue-cil3使用process.env.VUE_APP_BASE_API全局地址代替vue-cli2的process.env.BASE_API
前几天Vue3.0正式发布，也说明了Vue3.0后面不会再有大规模改动，大家可以开始系统性学习了，虽然目前大多数公司使用的还是Vue2.0，但这只是一个过渡阶段，Vue3.0经历了两年的开发，在去年Vue2.0也引入了Vue3.0体验组件，后面基本是新项目肯定会使用Vue3.0，Vue2.0到Vue3.0变化还是蛮大的。今天就一起学一下vue-cli4/vue-cil3和vue-cli2在全局地址.env上的使用吧。
由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？
一、建立.env系列文件
首先我们在根 vue项目配置文件.md 目录新建3个文件，分别为.env.development，.env.production，.env.test
注意文件是只有后缀的。
.env.development 模式用于serve，开发环境，就是开始环境的时候会引用这个文件里面的配置
.env.production模式用于build，线上环境。
.env.test 测试环境
二、修改文件
分别在文件内写上：
1.开发环境
//.env.development
VUE_APP_BASE_API = ‘需要请求API’
1
2
2.线上环境
//.env.production
VUE_APP_BASE_API = ‘需要请求API’
1
2
3.测试环境
//.env.test
VUE_APP_BASE_API = ‘需要请求API’
1
2
三、更改package.json文件
“scripts”: {
“dev”: “vue-cli-service serve”,
“test”: “vue-cli-service serve –mode test”,
“build”: “vue-cli-service build”,
“build:test”: “vue-cli-service build –mode test”,
“lint”: “vue-cli-service lint”
},
1
2
3
4
5
6
7
四、使用
当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。
例如：
在js文件中直接使用
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
})
1
2
3
4
1.Vue2.0页面写法
通过data定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用computed()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2.Vue3.0页面写法
Vue3.0使用setup()的一个写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
或使用computed()
————————————————
版权声明：本文为CSDN博主「文化沙漠麦七」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42783654/article/details/108842949