记录vue动态切换访问后台服务-育师

1.在public文件夹内的配置文件配置服务ip

const VUE_APP_URL = 'http://127.0.0.1:2222' // 在线服务器地址 const VUE_APP_URL2 = 'http://127.0.0.1:1111' // 离线本地地址 const IS_FLAG = "true" // 是否启用在线离线切换 const IS_STATUS = "onLine" // 初始化时在线-onLine/offLine

2.修改request.ts,进行判断

import Axios, { AxiosResponse } from 'axios'; import { ElMessage, ElLoading } from 'element-plus'; import router from '../router' // 全局变量声明（保持不变） declare const VUE_APP_URL: any; // 兼容字符串/对象 declare const VUE_APP_URL2: any; declare const IS_FLAG: any; declare const IS_STATUS: any; const sevice = Axios.create({ timeout: 300000, // 移除静态baseURL，改为拦截器动态设置 }); let loadingInstance: any let loadSign = true // const router = useRouter(); sevice.interceptors.request.use(config => { // ========== 核心：根据IS_STATUS动态设置baseURL ========== // 1. 读取/初始化IS_STATUS（优先localStorage，无则用全局变量） let baseURL = VUE_APP_URL if (IS_FLAG == "true") { const storageIsStatus = localStorage.getItem('IS_STATUS'); const storageIsFlag = localStorage.getItem('IS_FLAG'); if (storageIsStatus && storageIsFlag) { if (storageIsFlag == "true" && storageIsStatus == "offLine") { baseURL = VUE_APP_URL2 } } else { // 初始化localStorage localStorage.setItem('IS_STATUS', String(IS_STATUS)); localStorage.setItem('IS_FLAG', String(IS_FLAG)); if (String(IS_FLAG) == "true" && String(IS_STATUS) == "offLine") { baseURL = VUE_APP_URL2 } } }else{ localStorage.removeItem('IS_STATUS') localStorage.setItem('IS_FLAG', String(IS_FLAG)); } config.baseURL = baseURL if (sessionStorage.getItem('Authorization')) { config.headers['Authorization'] = sessionStorage.getItem('Authorization'); } loadSign = sessionStorage.getItem('loadSign') ? JSON.parse(sessionStorage.getItem('loadSign') || 'true') : false if (loadSign) { loadingInstance = ElLoading.service({ // 加载loading fullscreen: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0)' }) } return config; }, error => { if (loadSign) { loadingInstance.close() } // error回调信息弹窗 ElMessage({ showClose: true, message: error && error.data.error.message, type: 'error' }) return Promise.reject(error) }); sevice.interceptors.response.use(response => { if (response.data.code === 200) { // ElMessage.success(response.data.message) } else { if (response.data.code !== 401) { ElMessage.error(response.data.message) } } if (loadSign) { loadingInstance.close() } return response; }, error => { if (loadSign) { loadingInstance.close() } const err = error.response.data.message console.log(error.response.data) if (error.response.data.code !== 401) { ElMessage.error({ message: err, //error.message, type: 'error', duration: 3 * 1000 }) } if (error.response.data.code === 401) { router.push({ path: '/' }) sessionStorage.setItem('loadSign', 'false') sessionStorage.clear() // localStorage.clear() } if (error.response.data.code === 403) { router.push({ path: '/401' }) } return Promise.reject(error) }); export default sevice;

3.添加心跳测试

import request from './../../request' export function testHeart() { return request({ url: '/system/dataSynchronization/heart', method: 'post' }); }

4.在界面添加切换按钮测试

<template> <div> <el-button @click="toChangeDataSource">切换</el-button> </div> </template> <script lang="ts"> import { testHeart } from '@/server/api/testHeart'; export default defineComponent({ const toChangeDataSource = async () => { if (localStorage.getItem('IS_FLAG') == "true") { if (localStorage.getItem('IS_STATUS') == "offLine") { localStorage.setItem('IS_STATUS', "onLine"); } else { localStorage.setItem('IS_STATUS', "offLine"); } let res = await testHeart(); } } return { toChangeDataSource } }); </script>

5.浏览器F12查看是否成功动态切换服务请求