如何在现有Vue项目中配置Nuxt 实现高SEO需求页面的SSR功能

1. 项目基础适配 #

• 优先选择和现有Vue版本匹配的Nuxt版本：Vue 3项目选Nuxt 3，Vue 2项目选Nuxt 2。在现有Vue项目根目录执行npx nuxi init（Nuxt3）或者create-nuxt-app（Nuxt2）初始化Nuxt项目结构，不用删除原有Vue项目的代码。
• 将原项目通用逻辑迁移到Nuxt对应目录，无需重复开发：
  • 公共组件放入components/目录，Nuxt会自动完成组件注册，无需手动引入
  • 工具函数、公共组合式函数放入composables/（Nuxt3）或utils/目录，支持自动导入
  • 状态管理文件（Pinia/Vuex）放入stores/目录，正常引入使用即可
  • 全局样式在nuxt.config的css配置项中统一引入即可

2. 部分页面SSR路由配置 #

不需要全量改造所有页面为SSR，仅需将需要SEO的页面单独配置SSR能力即可，两种常用配置方案：

方案1：路由规则统一配置 #

在nuxt.config.ts中通过routeRules（Nuxt3）单独配置需要SSR的路由，其余路由默认走客户端SPA渲染：

export default defineNuxtConfig({
  // 全局默认开SSR，不需要的路由单独关闭
  ssr: true,
  routeRules: {
    // 需要SSR的页面路由单独标记，比如商品详情页、关于页等高SEO需求页面
    '/product/detail/**': { ssr: true },
    '/about': { ssr: true },
    // 其余所有路由走客户端渲染，和原有SPA逻辑一致
    '/**': { ssr: false }
  }
})

如果使用Nuxt2，可在对应页面组件的配置项中添加ssr: false关闭单页面SSR，或者通过router.extendRoutes批量配置。

方案2：仅在pages目录下创建SSR页面 #

Nuxt会自动读取pages/目录下的文件生成路由，仅将需要SSR的页面放入该目录，其余路由通过创建pages/[...slug].vue兜底页面承接原有SPA的入口逻辑，兜底页面配置ssr: false即可完全复用原有Vue项目的SPA代码。

3. 浏览器API兼容处理 #

服务端渲染环境没有window、document等浏览器专属API，原有代码中用到浏览器API的部分需要做兼容：

• 用process.client（Nuxt2/3通用）判断运行环境，仅在客户端执行浏览器相关逻辑
• 仅在客户端使用的组件，用<ClientOnly>组件包裹，避免服务端渲染报错
• 仅支持浏览器端的第三方依赖，在nuxt.config的build.transpile配置项中添加对应包名，配置客户端侧加载即可。

4. 打包部署 #

• 配置完成后执行npm run build打包Nuxt项目，打包产物同时兼容SSR页面的服务端渲染和普通页面的SPA逻辑
• 部署时直接执行Nuxt打包后的服务启动命令node .output/server/index.mjs（Nuxt3）即可，无需单独部署原有Vue项目的静态资源，所有路由请求由Nuxt服务统一响应。

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