web部署时通过静态文件配置请求地址

web部署动态更改请求地址

通过访问根目录config配置实现在打包文件外部更改请求地址

1. 配置 Vite

export default defineConfig({
  base: '/', // 设置公共路径
})

2. 创建配置文件

开发：

在根目录创建config.json文件

不影响proxy代理

{
  "apiBaseUrl": "/"
}

部署

在dist文件 根目录创建config.json文件

{
  "apiBaseUrl": "https://example.com/api"
}

3. 加载配置文件

src\utils\configure.ts

export const defaultBaseUrl = 'https://example.com/api/'
export async function loadConfig() {
  try {
    const response = await fetch(`${import.meta.env.BASE_URL}config.json`)
    if (!response.ok) {
      console.error('获取配置文件失败')
    }
    const config = await response.json()
    return config
  } catch (error) {
    console.error('加载配置文件时出错:', error)
    return {
      apiBaseUrl: defaultBaseUrl,
    }
  }
}

4. 配置 Pinia 存储

在 src/store/config.js 中定义一个存储来管理配置：

import { defineStore } from 'pinia';
import { defaultBaseUrl } from '@/utils/configure'

export const useConfigStore = defineStore('config', {
  state: () => ({
    apiBaseUrl: ''
  }),
  actions: {
    setConfig(config) {
      this.apiBaseUrl = config?.apiBaseUrl ?? defaultBaseUrl
    },
  }
});

6. 在应用启动时加载配置并设置存储

import { createApp } from 'vue';
import App from './App.vue';
import { loadConfig } from './config';
import { createPinia } from 'pinia';
import { useConfigStore } from '@/store/piniaStore/config';

loadConfig().then((config) => {
  const { setConfig } = useConfigStore(pinia)
  setConfig(config)

  const app = createApp(App)
  app.mount('#app')
})

7. 配置 Axios 实例

import axios from 'axios'
import { useConfigStore } from '@/store/piniaStore/config.js'
import { defaultBaseUrl } from '@/utils/configure'

const request = axios.create({
  baseURL: defaultBaseUrl,
  timeout: 600000,
})
request.interceptors.request.use((config) => {
  config.baseURL = useConfigStore().apiBaseUrl || config.baseURL
  return config
})