vue中axios在ssr场景下需重构数据获取逻辑：服务端无浏览器api，须区分执行环境、预取数据并注入store，通过asyncdata等静态方法在渲染前获取数据，axios实例需双端适配且携带cookies透传，失败时降级保障渲染。
Vue 中 Axios 在 SSR 场景下不能直接照搬客户端写法，核心难点在于：服务端没有 window、localStorage、document 等浏览器 API，且请求需在渲染前完成、状态要同步到客户端。适配关键不是“换个写法”，而是重构数据获取时机与执行环境逻辑。
区分服务端/客户端执行环境
所有依赖浏览器对象的代码（如读取 token、设置请求头）必须包裹判断，否则服务端会报错：
- 用
process.env.VUE_ENV === 'client'或typeof window !== 'undefined'判断执行环境 - 例如：token 从 cookie 或服务端上下文获取，而非
localStorage.getItem('token') - 拦截器中避免使用浏览器专属 API；服务端可用
req.headers.cookie提取身份信息
统一请求入口 + 服务端预取数据
不能在组件 mounted 中发请求（服务端无生命周期钩子），必须提前在路由匹配后、渲染前完成数据获取：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 为每个路由组件定义
asyncData或fetch静态方法（Nuxt 中为asyncData，自建 SSR 中可约定） - 服务端 entry（
entry-server.js）中，调用匹配组件的asyncData，返回 Promise 并等待其 resolve - 将获取的数据注入 Vuex store 或 context，再序列化进 HTML（如
<script>window.__INITIAL_STATE__ = ...</script>）
Axios 实例需支持双端配置
服务端和客户端应共用同一套 axios 配置逻辑，但 baseURL、超时、默认 headers 等需按环境差异化处理：
- 服务端请求需携带客户端传来的 cookies（通过 Express 的
cookie-parser解析后传入 context） - 示例：服务端 axios 实例可设置
headers.Cookie = context.cookies，实现登录态透传 - 避免在实例中硬编码
baseURL，建议通过环境变量或运行时参数动态注入（如process.env.API_BASE_URL）
错误处理与降级策略要明确
服务端请求失败不能像客户端那样弹 toast 或跳转，需保证页面仍能渲染（哪怕数据为空）：
- 服务端请求异常时，捕获错误并填充空数据或默认值，避免渲染中断
- 客户端 hydration 阶段检查服务端数据是否完整，缺失则触发二次请求（即“注水后补数据”）
- 对非关键接口（如推荐位、统计上报），可标记为“仅客户端执行”，不参与 SSR 预取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
