我們目前采用的是通過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).TenantConfigDtoconfig.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 = baseUrlthis.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] = truereturn 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} = resreturn {data, status}} else {Toast.clear()Toast('響應出錯請重新請求')return false}},error => {// console.log('error', error)this.destroy(url)let errorInfo = error.responseif (!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

總結

以上是生活随笔為你收集整理的vue项目动态域名设置方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。