vue实现预渲染
预渲染的概念
预渲染（Prerendering）是指在构建阶段生成静态HTML文件，而非在客户端动态渲染页面。适用于内容变动较少、需要快速首屏加载的网站，如博客、产品展示页等。
Vue实现预渲染的两种方式
使用vue-prerender-spa-plugin
该插件基于Puppeteer，在构建时自动抓取路由并生成静态HTML。
安装依赖：
npm install vue-prerender-spa-plugin puppeteer --save-dev配置vue.config.js：
const PrerenderSPAPlugin = require('vue-prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about', '/contact'],
renderer: new Renderer({
headless: true,
renderAfterDocumentEvent: 'render-event'
})
})
]
}
};在main.js中触发渲染事件：
new Vue({
router,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'));
}
}).$mount('#app');使用SSR + 静态导出
通过Vue SSR结合静态导出工具实现更灵活的预渲染。
安装@vue/server-renderer：
npm install @vue/server-renderer --save-dev创建渲染脚本（render.js）：
const fs = require('fs');
const { renderToString } = require('@vue/server-renderer');
const createApp = require('./src/main').default;
const routes = ['/', '/about'];
routes.forEach(async route => {
const app = createApp({ url: route });
const html = await renderToString(app);
fs.writeFileSync(`dist${route === '/' ? '/index' : route}.html`, html);
});注意事项
- 动态路由需预先定义所有可能路径
- 预渲染页面仍需要Vue hydrate交互功能
- 避免在created/mounted中使用仅客户端的API
- 使用process.client判断客户端环境
效果验证
构建后检查dist目录会生成about.html等静态文件，直接打开可查看预渲染效果。使用Lighthouse工具测试可观察到首屏性能提升。
