vue预渲染实现
Vue 预渲染的实现方法
Vue 预渲染（Prerendering）是一种在构建阶段生成静态 HTML 文件的技术，适用于内容变化不频繁的页面，能显著提升首屏加载速度和 SEO 效果。
使用 vue-cli-plugin-prerender-spa
安装插件：
vue add prerender-spa配置 vue.config.js：
module.exports = {
pluginOptions: {
prerenderSpa: {
routes: ['/', '/about', '/contact'],
rendererOptions: {
headless: false // 调试时可开启
}
}
}
}routes 指定需要预渲染的路由路径，构建后会为每个路由生成对应的 index.html 文件。
使用 webpack 插件 prerender-spa-plugin
安装依赖：
npm install prerender-spa-plugin --save-dev配置 vue.config.js：
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const path = require('path')
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/product'],
postProcess(renderedRoute) {
renderedRoute.html = renderedRoute.html.replace(
/<script (.*?)>/g,
''
)
return renderedRoute
}
})
]
}
}通过 postProcess 可对生成的 HTML 进行后处理，例如移除脚本标签。
动态路由预渲染
对于动态路由（如 /product/:id），需在配置中明确列出所有可能的路由：
routes: [
'/product/1',
'/product/2',
'/product/3'
]或通过代码动态生成路由列表。
预渲染与 SSR 的区别
- 预渲染：构建时生成静态 HTML，适合内容不变的页面（如营销页）。
- SSR：每次请求时动态生成 HTML，适合内容频繁变化的页面（如用户仪表盘）。
注意事项
- 预渲染的页面不会执行客户端 JavaScript，需确保关键内容已直接包含在 HTML 中。
- 动态数据（如 API 请求）需通过
asyncData或类似机制在构建阶段获取。 - 避免在预渲染页面中使用
window等浏览器特有对象，可通过process.client判断环境。
验证预渲染效果
构建后检查 dist 目录，每个预渲染路由应生成独立的 index.html 文件。使用静态服务器（如 serve）测试页面是否直接显示内容而无加载延迟。
