Nuxt3项目如何通过开启ssr让网页实现seo自由！

nuxt.config开启ssr

# nuxt.config.ts
 
export default defineNuxtConfig({
  // 是否开启SSR
  ssr: true
})

终端运行 npm run generate

generate 预渲染应用程序的每个路由，并将结果存储为纯HTML文件。

 "scripts": {
    "generate": "nuxt generate --dotenv .env.production",
  },

# npx nuxi generate [rootDir] [--dotenv]
# 选项	默认值	描述
# rootDir	.	要生成的应用程序的根目录
# --dotenv	.	指定要加载的另一个 .env 文件，相对于根目录。

渲染成功

这是一个漫长的等待（取决于你项目页面量的复杂程度）

ℹ Prerendered 99 routes in 52.006 seconds                                                                 nitro 15:14:50   
✔ Generated public .output/public                                                                         nitro 15:14:51
✔ You can preview this build using npx serve .output/public                                               nitro 15:14:51
✔ You can now deploy .output/public to any static hosting!                                                      15:14:51
 *  终端将被任务重用，按任意键关闭。 

渲染结果文件存放在你项目的 .output/public 目录，结构如下：

本地预览

在终端打开命令行，输入 npx serve .output/public  

SEO设置校验

在任意浏览器打开 http://localhost:61718/  （参上图示 -Local 地址）

网页成功（如果出现布局乱或者页面事件无效说明渲染出错了）打开后，右键查看源代码

就有你通过useSeoMeta设置的动态seo信息或useHead设置的动态头部属性啦

附上我的seo及head代码段

# app.vue
 

静态托管部署

至此，你可以将 .output/public 文件部署到任何静态托管服务上！

结束语

最后附上我的站点地图 sitemap.xml 

关于站点地图sitemap的配置会在后续更新~

包含：

1. 网站地图表结构（如何控制字段：lastmod、priority..）
2. 网站地图表的静态数据源
3. 网站地图表数据源（通过异步请求实现全站点页面动态生成，包含详情页面）
4. 禁用指定数据源（如登录、注册等页面）
5. 禁用XSL样式表（默认状态下sitemap.xml经过样式渲染的）

等