npm package: @seresweb/vite-plugin-seo-prerender
Description: `vite-plugin-seo-prerender` 插件是一个用于 `Vite` 构建工具的预渲染插件，它可以将你的单页面应用 (SPA) 在构建时静态预渲染为 HTML 文件，以提高首次加载速度和SEO友好性。适用于对站点少量页面生成静态HTML。支持 `Vue、React`等所有框架
Latest version: 1.0.0

forked from [337547038/vite-plugin-seo-prerender](https://github.com/337547038/vite-plugin-seo-prerender)

## 新增特性

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| setup | async function({ browser, page, config }) | 生成 html 文件前执行，可用于预设一些 storage 信息等 |

## 安装

```shell
npm i @seresweb/vite-plugin-seo-prerender
```

## 发布

目前无自动发布流程，请在本地构建后发布（请务必拉取 main 分支后再进行本地构建））

1. 本地构建

```
pnpm run publish
```

2. 更新版本号

```
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease]
```

```
1.0.0-0
| | | | - 测试版本号
| | | - 补丁版本
| | - 功能版本
| - 主版本
```

2. 推送

```
cd packages && npm publish --access public
```

---

以下是原文档

# vite-plugin-seo-prerender

`vite-plugin-seo-prerender` 插件是一个用于 `Vite` 构建工具的预渲染插件，它可以将你的单页面应用 (SPA) 在构建时静态预渲染为 HTML 文件，以提高首次加载速度和 SEO 友好性。适用于对站点少量页面生成静态 HTML。支持 `Vue、React`等所有框架

---

- 静态预渲染：将单页面应用在构建时预渲染为 HTML 文件。
- SSG (静态站点生成)：支持根据路由配置生成静态 HTML 文件。
- 异步数据获取：支持在构建时获取异步数据并注入到预渲染的 HTML 文件中。
- SEO 友好：生成的静态 HTML 文件对搜索引擎友好，可以更好地被爬虫索引。
- 支持纯静态：public 目录下的 .html 支持动态引入样式及公共部分。

## 安装使用

```shell
npm install vite-plugin-seo-prerender -D
# or
pnpm install vite-plugin-seo-prerender -D
# or
yarn install vite-plugin-seo-prerender -D
```

## 使用配置

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import seoPrerender from 'vite-plugin-seo-prerender'

export default defineConfig({
  plugins: [
    seoPrerender({
      routes: [] // 需要生成的路由
    })
  ]
})
```

## 纯静态开发

**使用预渲染生成的 html 页面有一个弊端，如预渲染生成页面 `/about/index.html`，它并不能通过 `http://xxx.com/about/index.html` 这样的形式正常访问，即使能正常展示也会丢失脚本事件**

```html
<!--/public/about/index.html-->
<body>
  <div><!--link href="/src/assets/header.html"--></div>
  <div>
    这里的路径需要使用相对于根目录的绝对路径，不能使用相对路径，如 ./assets/header.html
  </div>
  <div>this page content</div>
</body>
```

## 发布

运行 `vite build` 构建命令时即可生成 HTML 文件

## API

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| puppeteer | object | puppeteer 一些配置 |
| routes | string[] | 生成预渲染的路由 path |
| network | boolean | 构建时是否获取异步数据并注入到预渲染的 HTML 文件中，默认 false 。开启后构建速度相对会慢些 |
| removeStyle | boolean | 移除预览服务生成多余样式，默认 true。如样式丢失，可设置为 false |
| callback | function(html,route) | 预渲染和处理 public 下.html 文件处理回调事件，可对需处理的页面进行修改，html 为将要生成的文件内容,route 当前处理的页面 path |
| publicHtml | boolean/string[] | 需要处理的纯静态文件。true 代表 public 整个目录下的 html 文件，数组时可指定文件，如['/contact/index.html'] |
| hashHistory | boolean | 路由模式为 hashHistory 时需设置为 true |
| delay | number | 延时等待时间，确保页面加载完成 |

## 附：seo 关键词优化路由设置

```ts
// router.ts
const routes = [
  {
    path: '/about',
    name: '/about',
    component: () => import('./views/about/index.vue'),
    meta: {
      title: '关于我们',
      keywords: '关键词1, 关键词2',
      description: '关于我们描述'
    }
  }
]

router.afterEach((to) => {
  const { title, keywords, description } = to.meta
  if (title) {
    document.title = title
  }
  if (keywords) {
    const metaKeywords = document.querySelector('meta[name="keywords"]')
    if (metaKeywords) {
      metaKeywords.content = keywords
    }
  }
  if (description) {
    const metaDescription = document.querySelector('meta[name="description"]')
    if (metaDescription) {
      metaDescription.content = description
    }
  }
})
```