@seresweb/vite-plugin-seo-prerender

v1.0.0

Published

4 months ago

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

0High
0Medium
0Low

imzbf

prerender seo puppeteer vue3 react vite 预渲染 seo优化

forked from 337547038/vite-plugin-seo-prerender

新增特性

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

安装

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

发布

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

本地构建

pnpm run publish

更新版本号

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

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

推送

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 支持动态引入样式及公共部分。

安装使用

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

使用配置

// 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 这样的形式正常访问，即使能正常展示也会丢失脚本事件

<!--/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 关键词优化路由设置

// 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
    }
  }
})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme