Vue项目如何区分开发还是生产环境切分不同环境接口
1.在c1.为什么要配置不同的接口地址目前,由于我在开发过程中,前端请求访问的是我本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以就在config/index.js文件中配置了代理,如下:意思就是说凡是以api开头的请求,会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名'但是在生产环境下,我们不需要在接口前面加api发送请求,所以我们需要判断开...
·
1.在c
1.为什么要配置不同的接口地址
目前,由于我在开发过程中,前端请求访问的是我本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以就在config/index.js文件中配置了代理,如下:
意思就是说凡是以api开头的请求,会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名'
但是在生产环境下,我们不需要在接口前面加api发送请求,所以我们需要判断开发环境和生产环境,然后写相应接口。
2.具体配置
在项目中找到以下两个文件:
config/dev.env.js 和 config/prod.env.js
2.1 在config/dev.env.js文件中加入一行代码:API_ROOT: ' "//localhost:8080/api" '
2.2 在config/prod.env.js文件中加入一行代码: API_ROOT: ' "" '
3.在src/main.js文件中配置全局变量(挂在vue原型上)
process.env是一个全局变量,能够判断当前环境。
所以在axios请求的时候,可以直接用this.baseURL+api :
更多推荐
已为社区贡献2条内容
所有评论(0)