vue项目动态域名设置方法
vue项目动态域名设置方法
·
我们目前采用的是通过config.js配置文件来做接口域名和相关域名的配置,部署时需要后端在上线的服务器上对配置文件修改。
如果业务域名是从固定路径获取的可参考以下方案。
在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项。
1. config文件
import { Getbyid } from '@/api/report/report'
import axios from 'axios'
const config = {
/**
* @description 配置显示在浏览器标签的title
*/
title: 'H5',
/**
* @description api请求基础路径
*/
baseUrl: {
pro: 'http://8701/',
//devZD: 'http://8003/',
//proZD: 'http://8003/',
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
Getbyid({id: '123456'}).then(res=>{
if(res&&res.data&&res.data.Entity){
let info = JSON.parse(res.data.Entity).TenantConfigDto
config.baseUrl.proZD = info.TerminalHost;
resolve()
}
}).catch(function(error) {
// SupplyChain.messageText('未配置租户信息!')
resolve()
})
})
}
}
export default config
2. main.js
import config from '@/config'
import { router } from './router'
config.requestRemoteIp().finally(res => {
new Vue({
router,
el: '#app',
render: h => h(App)
})
})
3. import axios from '@/utils/api.request.ZD'
import HttpRequest from '@/utils/axios.ZD'
import config from '@/config'
// 获取地址
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.devZD : config.baseUrl.proZD
const axios = new HttpRequest(baseUrl)
export default axios
4. axios.ZD.js
import axios from 'axios'
import {Toast} from 'vant'
class HttpRequest {
constructor(baseUrl) {
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig(params) {
const config = {
baseURL: this.baseUrl,
headers: {
Authorization: localStorage.Authorization === undefined || localStorage.Authorization === '' ? '' : localStorage.Authorization,
'Content-Type': 'application/json;charset=UTF-8'
}
}
if (params.method === 'get') {
config.data = {
unused: 0
}
}
return config
}
destroy(url) {
delete this.queue[url]
if (!Object.keys(this.queue).length) {
// Spin.hide()
}
}
interceptors(instance, url) {
// 请求拦截
instance.interceptors.request.use(
config => {
// 添加全局的loading...
if (!Object.keys(this.queue).length) {
// Spin.show() // 不建议开启,因为界面不友好
}
this.queue[url] = true
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截
instance.interceptors.response.use(
res => {
if (Number(res.data.status.code) === 401) {
// localStorage.Authorization = ''
// localStorage.removeItem('user')
// localStorage.token = ''
Toast.clear()
Toast('请重新获取授权')
return false
} else if (Number(res.data.status.code) === 0) {
const {data, status} = res
return {data, status}
} else {
Toast.clear()
Toast('响应出错请重新请求')
return false
}
},
error => {
// console.log('error', error)
this.destroy(url)
let errorInfo = error.response
if (!errorInfo) {
const {
request: {statusText, status},
config
} = JSON.parse(JSON.stringify(error))
errorInfo = {
statusText,
status,
request: {responseURL: config.url}
}
}
return Promise.reject(error)
}
)
}
request(options) {
// const instance = axios.create({ Cookie: document.cookie })
const instance = axios.create()
const header = this.getInsideConfig(options)
options = Object.assign(header, options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
更多推荐
已为社区贡献1条内容
所有评论(0)