vue本地测试和打包上线,接口不同域名,测试需要跨域和正式不需要跨域的解决方法

vue本地测试和打包上线,接口不同域名,测试需要跨域和正式不需要跨域的解决方法

通过判断本地环境还是打包环境

定义全局变量,在global.vue中定义:

<script type="text/ecmascript-6">

const BASE_URL = ''
export default{
 BASE_URL

}

</script>

在main.js 中引入:如

import global_ from '@/components/global.vue'

挂载到vue 实例中:

Vue.prototype.GLOBAL = global_

//打包环境判断

if(process.env.NODE_ENV == 'production'){
Vue.prototype.GLOBAL.BASE_URL=" 部署服务调用正式地址"

}else{

//不用跨域

Vue.prototype.GLOBAL.BASE_URL="开发测试地址"

//跨域,proxyTable代理,自定义如/api

Vue.prototype.GLOBAL.BASE_URL="/api"  
}

在config index.js 配置如下:

proxyTable: {

'/api': {
target: 'http://xxxxx.cn',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}

},

接下来你的接口地址可以这样写啦:

axios.post(this.GLOBAL.BASE_URL+'/huananhospital/findGoodByTypeId').then((res)=>{


})

猜你喜欢

转载自www.cnblogs.com/liuzhouyuan/p/9274963.html
今日推荐