NuxtJS如何排除index.vue预渲染同时保证dist目录生成index.html

nuxt generate 的 exclude 配置项作用是标记不需要预渲染的路由，你主动将根路由 / 加入排除列表后，构建产物dist目录自然不会生成对应的 index.html 文件。
本地执行 npm run start 正常是因为启动了Nuxt的本地Node服务，会自动处理未预渲染路由的回退逻辑，而线上静态部署场景没有服务端兜底，访问根路径找不到对应的静态文件就会抛出404错误。

根据你的实际需求选择对应方案即可：

• 方案一：无特殊理由不需要排除根路由的话，直接删除exclude配置中的'/'项即可，修改后配置如下：

generate: {
    exclude: [/^\/user/]
}

重新执行nuxt generate后，dist目录会生成根路径对应的index.html，部署后即可正常访问。

• 方案二：如果确实需要排除根路由预渲染，走SPA模式加载根路径，可以在generate配置中开启fallback兜底：

generate: {
    exclude: ['/', /^\/user/],
    fallback: true
}

开启后构建会自动生成通用的SPA fallback index.html 文件，所有未预渲染的路由都会走这个文件加载SPA逻辑。如果部署到Nginx，还需要补充以下配置做路由回退：

location / {
  try_files $uri $uri/ /index.html;
}

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