Nuxt3部署至Azure静态Web应用后路由直接访问异常求助

1. 修正staticwebapp.config.json配置 #

原配置存在规则冲突，Nuxt3的静态资源路径无需走导航回退逻辑，调整后的配置如下：

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_nuxt/*", "/assets/*", "/favicon.ico"]
  }
}

• 移除原routes节点，避免和navigationFallback规则冲突
• exclude字段指定无需回退的静态资源路径，确保Nuxt的样式、脚本等资源能正常加载

2. 检查Nuxt3项目核心配置 #

确保nuxt.config.ts中的关键配置正确：

export default defineNuxtConfig({
  ssr: false, // 保持和Quasar一致的纯客户端渲染模式
  app: {
    baseURL: '/', // 匹配Azure静态Web应用的根域名路径
  },
  generate: {
    // 显式声明需要预生成的路由（pages目录下的路由会自动识别，复杂动态路由需手动添加）
    routes: ['/shop']
  }
})

• 执行nuxt generate命令生成静态文件，确认dist目录下存在shop/index.html文件
• 若项目启用SSR，Azure静态Web应用需搭配Azure Functions处理服务端渲染逻辑，此场景需单独调整部署配置

3. 确认Azure部署输出目录 #

在Azure静态Web应用的部署设置中，将输出目录指定为dist（Nuxt3静态生成的默认输出目录），避免部署时遗漏静态页面文件。

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