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