vite-plugin-seo-prerender
Advanced tools
`vite-plugin-seo-prerender` 插件是一个用于 `Vite` 构建工具的预渲染插件，它可以将你的单页面应用 (SPA) 在构建时静态预渲染为 HTML 文件，以提高首次加载速度和SEO友好性。适用于对站点少量页面生成静态HTML。支持 `Vue、React`等所有框架
vite-plugin-seo-prerender 插件是一个用于 Vite 构建工具的预渲染插件，它可以将你的单页面应用 (SPA) 在构建时静态预渲染为
HTML 文件，以提高首次加载速度和SEO友好性。适用于对站点少量页面生成静态HTML。支持 Vue、React等所有框架
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 目录下的 .html
文件时，同样支持热更新及引入项目由 scss、less等编写的公共样式。并可使用指定标签替换页面内容，如公共头尾部等。只需简单配置publicHtml即可
<!--/public/about/index.html-->
<body>
<div><!--link href="/src/assets/header.html"--></div>
<div>这里的路径需要使用相对于根目录的绝对路径，不能使用相对路径，如 ./assets/header.html</div>
<div>this page content</div>
</body>
在浏览器输入如 http://localhost/contact/index.html 即可看到被替换后的页面，当修改scss/less文件或当前 html 页改变时，可实现热更新。
运行 vite build 构建命令时即可生成 HTML 文件
| 参数 | 类型 | 说明 |
|---|---|---|
| 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'] |
| scss | [{entry,outDir}] | 需要编译的单独scss文件。专为单独纯html页面量身定制，可将独立(即没有在项目里引入)的scss转换为css |
| hashHistory | boolean | 路由模式为hashHistory时需设置为true |
| delay | number | 延时等待时间，确保页面加载完成 |
| concurrency | number | 并发处理数量，默认为 1，可根据机器性能适当调整 |
// 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
}
}
})
FAQs
`vite-plugin-seo-prerender` 插件是一个用于 `Vite` 构建工具的预渲染插件，它可以将你的单页面应用 (SPA) 在构建时静态预渲染为 HTML 文件，以提高首次加载速度和SEO友好性。适用于对站点少量页面生成静态HTML。支持 `Vue、React`等所有框架
The npm package vite-plugin-seo-prerender receives a total of 295 weekly downloads. As such, vite-plugin-seo-prerender popularity was classified as not popular.
We found that vite-plugin-seo-prerender demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.