预渲染模式
预渲染 prerender-spa-plugin 配置生成多页面，解决首屏白屏问题，提升用户体验。同时配合 vue-meta-info 可以生成 title 和 meta标签，可解决SPA页面的SEO痛点。
-
prerender-spa-plugin 使用方法
- 安装 prerender-spa-plugin
npm i prerender-spa-plugin --save - 使用
我的项目是用vue-cli3进行的搭建，在 vue.config.js 文件里进行如下操作。
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { config.plugins.push( new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), // 需要进行预渲染的路由路径 我这里做的是首页 routes: ['/'], // html文件压缩 minify: { minifyCSS: true, // css压缩 removeComments: true // 移除注释 }, renderer: new Renderer({ // Optional - The name of the property to add to the window object with the contents of `inject`. injectProperty: '__PRERENDER_INJECTED', // Optional - Any values you'd like your app to have access to via `window.injectProperty`. inject: {}, // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。 // renderAfterDocumentEvent: 'render-event' }) }) ) } };- 重新打包后访问项目就能看到效果
- 安装 prerender-spa-plugin
注意：官方文档上 路由模式必须为 history 。如果不设置history模式，也能运行和生成文件，每个index.html文件的内容都会是一样的。所以必须使用 history模式
