Nuxt 3 SPA部署Azure存储账户：刷新404及缓存异常问题

1. 页面刷新的404是否会导致浏览器加载缓存的旧资源？ #

不会直接导致，但存在间接关联。Azure返回404后，SPA的前端路由会接管并加载index.html，如果index.html被浏览器或CDN缓存，就会加载旧版本的资源。但404本身不是缓存旧资源的直接原因，核心是缓存策略配置问题。

2. 两个问题是否独立？ #

是的，两者本质是独立问题：

• 刷新404是Azure静态托管的路由重写规则缺失，导致直接访问子路由时存储账户找不到对应文件；
• Stripe返回后显示旧内容是浏览器/CDN的缓存策略问题，外部跳转回应用时没有拉取最新的页面资源。

3. 解决Azure存储账户上的页面刷新404问题 #

Azure静态站点托管默认不会处理SPA的前端路由，需要手动添加路由重写规则：

• 登录Azure门户，进入你的存储账户；
• 找到「静态网站」设置，在「路由规则」区域点击「添加规则」；
• 源路径填/*，目标路径填/index.html，规则类型选择「重写」；
• 保存设置后，重新部署应用（确保index.html已正确上传到存储账户的$web容器）。
  这样所有子路由请求都会被重写到index.html，由Nuxt的前端路由处理，不会再返回404。

4. 确保从Stripe返回后/overview始终获取最新内容 #

需要从缓存策略入手，避免核心资源被缓存：

• 配置Nuxt构建哈希：Nuxt 3默认在生产构建时会给JS/CSS等静态资源添加哈希后缀（如app.abc123.js），部署新版本后文件名变化，浏览器会自动加载新资源，无需额外配置；
• 设置index.html的缓存控制：在Azure存储账户的$web容器中，找到index.html文件，修改其「缓存控制」属性为no-cache, must-revalidate或max-age=0，确保每次请求都会从服务器拉取最新的index.html；
• 可选：添加页面级缓存控制：在Nuxt的nuxt.config.ts中，给/overview页面添加缓存控制meta标签，强制浏览器验证资源有效性：

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          httpEquiv: 'Cache-Control',
          content: 'no-cache, must-revalidate'
        }
      ]
    }
  }
})

外部跳转（如从Stripe返回）会触发浏览器的完整请求，只要index.html不被缓存，就能加载最新的页面内容。

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