Vite/Vue生产环境Axios请求Base URL异常问题求助

• 配置Axios全局baseURL
  利用Vite内置的import.meta.env.BASE_URL变量（它会自动匹配你在vite.config.js中设置的base: '/app'），初始化Axios时指定baseURL：

  import axios from 'axios'
  
  const axiosInstance = axios.create({
    baseURL: import.meta.env.BASE_URL
  })
  
  // 后续请求直接使用这个实例
  async function loadConfig() {
    const response = await axiosInstance.get('config')
    // 处理配置数据
  }
  

  这样不管当前页面处于哪个子路径，Axios都会基于/app拼接请求路径，最终指向正确的/app/config，而非相对当前页面的错误路径。

• 直接使用根相对路径
  如果不想全局配置Axios实例，也可以在请求时结合Vite的base变量动态拼接根相对路径：

  async function loadConfig() {
    const response = await axios.get(`${import.meta.env.BASE_URL}config`)
  }
  

  这种方式同样能确保请求路径始终锚定应用根路径（/app），不受当前页面URL影响。

• 辅助检查路由与服务器配置
  若你使用了Vue Router的history模式，生产环境需确保服务器配置了SPA fallback（比如Nginx的try_files $uri $uri/ /app/index.html;），这虽不是Axios路径错误的直接原因，但能避免页面刷新时的404问题，保障请求环境稳定。

内容的提问来源于stack exchange，提问作者Jason