页面刷新后Vuex state无返回响应，axios请求URI丢失/api前缀问题咨询

触发原因梳理 #

• axios实例baseURL配置为相对路径是最高发原因：页面刷新后如果当前访问路径是多级路由（如/dashboard/overview），相对路径会基于当前页面路径拼接，导致全局/api前缀被覆盖
• 未做Vuex状态持久化，刷新后内存中的请求配置参数被清空，axios调用时未正确拼接前缀
• 开发环境devServer.proxy的pathRewrite配置错误，意外移除了/api前缀

修复步骤 #

1. 修正axios全局配置 #

强制使用绝对路径配置baseURL：

// axios实例初始化代码
import axios from 'axios'
const request = axios.create({
  // 禁止使用 './api' 这类相对路径
  baseURL: process.env.VUE_APP_BASE_API || '/api',
  timeout: 10000
})
export default request

2. 补充Vuex状态持久化逻辑 #

避免刷新后重复拉取用户信息，减少异常请求触发概率：

// store/modules/user.js
const state = {
  // 初始化时从本地存储读取数据
  userInfo: JSON.parse(localStorage.getItem('USER_INFO')) || null,
  token: localStorage.getItem('TOKEN') || ''
}
const mutations = {
  SET_USER_INFO(state, payload) {
    state.userInfo = payload
    // 同步更新本地存储
    localStorage.setItem('USER_INFO', JSON.stringify(payload))
  },
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('TOKEN', token)
  }
}

3. 校验代理配置（开发环境适用） #

确认vue.config.js中代理规则未错误移除/api前缀：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://你的后端服务地址:端口',
        changeOrigin: true,
        // 仅当后端接口本身没有/api前缀时才开启下面的配置，否则注释掉
        // pathRewrite: {
        //   '^/api': ''
        // }
      }
    }
  }
}

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