Nuxt 3 如何构建适用于共享主机的SPA应用？

1. 配置Nuxt为SPA模式 #

在项目根目录的nuxt.config.js（或nuxt.config.ts）中修改核心配置：

export default {
  // 关闭SSR，启用纯SPA模式
  ssr: false,
  // 指定构建输出目录为dist（和Vue默认输出目录一致）
  buildDir: 'dist',
  // 确保生成index.html作为入口文件
  generate: {
    fallback: true
  }
}

2. 执行构建命令 #

运行标准构建指令：

npm run build

构建完成后，dist文件夹会生成index.html及对应的静态资源文件，结构和Vue项目的输出完全一致。

3. 部署到普通主机 #

直接将dist文件夹内的所有文件上传至主机的网站根目录即可，部署流程和Vue项目完全相同。

Nuxt 3版本适配配置 #

如果使用Nuxt 3，在nuxt.config.ts中调整配置：

export default defineNuxtConfig({
  ssr: false,
  app: {
    baseURL: '/' // 适配主机基础路径，无需改动可直接部署到根目录
  },
  nitro: {
    output: {
      dir: './dist'
    }
  }
})

执行npm run build后，dist目录会包含index.html和静态资源文件夹，可直接部署。

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