vue baseurl 环境变量,vue base_url
这篇文章主要介绍了某视频剪辑软件跨域处理方式(vue项目中基础地址设置问题),具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue跨域处理(baseUrl设置问题)一、方法一二、方法二三、方法三某视频剪辑软件请求不同的域名，baseURL配置
vue跨域处理(baseUrl设置问题)
一、方法一
在公用文件common.js中设置基础地址
导出变量基本URL=进程。环境。node _ ENV=== production ？窗户。g . API URL:"/API "
该方法的优点：在项目打包时，静态下面的文件是不会被工具处理的，所以可以通过改变静电下配置文件中的值，更改服务器地址。
在主页。射流研究…中设置全局的爱可信配置
从" axios "导入爱可信
从" @/assets/js/common.js "导入{baseUrl}
axios.defaults.baseURL=baseUrl
在api_message.js中声名调用接口的方法
从" qs "导入全国工业产品生产许可证
导出函数messagelist (params={}) {
返回axios.post(/event/list.do ，qs.stringify(params))
}
注意：此处引入全国工业产品生产许可证的原因
爱可信默认是数据格式提交，确认后台是否做了对应的支持；若是只能接受传统的表单序列化，就需要自己写一个转义的方法，或者用全国工业产品生产许可证依赖。
组件中调用
从" @/assets/js/api_message.js "导入{邮件列表}
导出默认值{
名称：商店列表，
组件：{ Item }，
data() {
返回{
列表：[]
}
},
方法：{
getList() {
让列表数据={
极限：8,
偏移量：0,
状态类型：这个。状态类型，
条件：这个条件
}
消息列表(列表数据).然后(响应={
if (response.data.length 0) {
this.list=response.data
}
}).接住(错误={
console.debug(错误)
})
}
}
}
二、方法二
开发环境：
生产环境：
在单个射流研究…中声名接口
从" axios "导入爱可信
从" qs "导入全国工业产品生产许可证
const instance=axios.create({
baseURL: baseUrl
})
导出函数登录(params={}) {
返回实例。post(/duty/log in ，qs.stringify(params))
}
注意：在有的编辑器中，会报基础地址未声名，但是不影响使用
三、方法三
开发环境
生产环境
在文件中使用
从" axios "导入爱可信
从" qs "导入全国工业产品生产许可证
const instance=axios.create({
baseURL: process.env.API
})
vue请求不同的域名，baseURL配置
1、index.js
proxyTable: { //解决跨域问题
/api:{ //设置第一代理
目标："http://192.168.105.42:9090",
//secure:false，//如果是安全超文本传输协议接口，需要配置这个参数
changeOrigin: true，//如果接口跨域需要配置这个参数
路径重写：{
^/api: /
}
},
/navy:{ //设置第二个代理
目标："http://192.168.105.42:9095",
更改来源：真的，
路径重写：{
^/navy: /
}
},
},
2、主网站
axios。默认值。基本m1 URL=/API ；
axios。默认值。basem 2 URL=/navy ；
//对得到请求传递过来的参数处理
函数paramsToUrl(url，params) {
如果(!参数)返回全球资源定位器(Uniform Resource Locator)
对于(参数中的变量键){
if (params[key] params[key]！=未定义){
if (url.indexOf(？))) !=-1) {
url= key = params[key]
}否则{
url=？ key = params[key]
}
}
}
返回全球资源定位器(Uniform Resource Locator)
}
函数需要数据(网址，参数，类型，项目){
如果(!网址)返回错误的
开关（项目){
案例《M1》:
URL=axios。默认值。基本m1 URL URL
打破；
案例《M2》:
URL=axios。默认值。basem 2 URL URL
打破；
默认值：
URL=axios。默认值。basem 4 URL URL
}
if(type===get){
url=paramsToUrl(url，params)
返回新承诺((解决，拒绝)={
Axios.get(url，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
}否则{
返回新承诺((解决，拒绝)={
Axios.post(url，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
}
}
//-接口一的请求数据方法互联网协议(互联网协议)地址为：http://192.168.105.42:9090调该方法
vue。原型。请求m1服务=函数(URL，参数，类型){
return requireData.call(this，url，params，type， M1 )
}
//-接口2的请求数据方法互联网协议(互联网协议)地址为：http://192.168.105.42:9095调该方法
vue。原型。reqm 2服务=函数(URL，参数，类型){
return requireData.call(this，url，params，type， M2 )
}
3、mine.vue
这个。请求m1服务(/bsApi/Home/adduser feedback ，params).然后（
res={
if(res.status==200){
_这个. toast.success({
消息： 提交成功，
禁止点击：真，
持续时间：1000
})
}
}
);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。