Vue自动判断开发环境与生产环境的接口地址
在开发项目时请求数据经常会遇到跨域问题,还好使用vue配置反向代理还是很简单好用的,但是在项目要进行打包上线时会遇到一个问题,反向代理只适用于开发环境下,生产环境是不支持的,也就是说如果不对接口进行处理的话是会报错的,那么我们应该如何解决这个问题呢?一.config文件夹下dev.env.js中开发环境下使用了反向代理解决跨域问题module.exports = merge(prodEnv,...
·
在开发项目时请求数据经常会遇到跨域问题,还好使用vue配置反向代理还是很简单好用的,但是在项目要进行打包上线时会遇到一个问题,反向代理只适用于开发环境下,生产环境是不支持的,也就是说如果不对接口进行处理的话是会报错的,那么我们应该如何解决这个问题呢?
一.config文件夹下dev.env.js中
开发环境下使用了反向代理解决跨域问题
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //添加该行代码,代表开发环境下使用配置的反向代理“/api”进行数据请求
})
二.config文件夹下prod.env.js中
生产环境下要可能更换接口地址
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"http://xx.xxx.xx.xx:8888"' //添加该行代码,填写接口地址,代表生产环境使用该接口请求数据
}
三.在使用到的文件中按需定义一个常量保存上述地址
const root = process.env.API_ROOT;
请求数据时使用root进行接口拼接这样就不需要麻烦的每一个接口进行更改这样麻烦且没有意义的工作了!
另外还有一种写一个专门的axios配置文件来进行处理,里面还包含了请求拦截,响应拦截,设置请求头及登录判断等 下一篇与路由的封装一同写出来。。
更多推荐
已为社区贡献7条内容
所有评论(0)