vue预渲染实现
Vue 预渲染的实现方法
预渲染（Prerendering）是指在构建阶段生成静态HTML文件，适用于内容相对固定、无需频繁更新的页面。以下是Vue项目中实现预渲染的几种方法：
使用prerender-spa-plugin插件
prerender-spa-plugin是Vue CLI项目中常用的预渲染插件，适用于静态站点或少量动态内容的场景。
安装依赖：
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: ['/', '/about', '/contact'],
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
renderAfterDocumentEvent: 'custom-event',
headless: true
})
})
]
}
};关键参数说明：
staticDir：输出目录routes：需要预渲染的路由路径renderAfterDocumentEvent：触发渲染的DOM事件（需在页面中手动触发）
使用Vue Meta处理SEO
预渲染结合vue-meta插件可动态管理页面元信息，提升SEO效果。
安装依赖：
npm install vue-meta在main.js中引入：
import VueMeta from 'vue-meta';
Vue.use(VueMeta);组件内使用：
export default {
metaInfo: {
title: '产品页面',
meta: [
{ name: 'description', content: '产品详情描述' }
]
}
}动态路由处理
对于动态路由（如/product/:id），需在构建时明确预渲染的具体路径：
修改vue.config.js：
routes: [
'/',
'/product/1',
'/product/2',
'/product/3'
]可通过脚本生成路由列表：
const productIds = [1, 2, 3];
const routes = productIds.map(id => `/product/${id}`);解决预渲染的常见问题
问题1：动态数据未加载
解决方案：在mounted钩子中触发自定义事件
mounted() {
setTimeout(() => {
document.dispatchEvent(new Event('custom-event'));
}, 500);
}问题2：路由模式冲突
必须使用history模式：
const router = new VueRouter({
mode: 'history',
routes: [...]
});替代方案：SSR与静态站点生成
- SSR（Nuxt.js）：适合高度动态内容，需服务器支持
- 静态生成（VuePress）：适合文档类网站
- 混合模式（Gridsome）：支持部分页面预渲染+部分动态加载
预渲染适用于：
- 营销页面
- 博客文章
- 产品展示页
- SEO关键页面
性能优化建议
- 预渲染后启用CDN加速
- 对非关键路由使用懒加载
- 使用
Intersection Observer实现图片懒加载 - 预渲染页面添加
<link rel="prerender">提示浏览器预加载资源
<link rel="prerender" href="/next-page">
