最全、最详细的解释请看prerender-spa-plugin 插件 Github
解决SEO(Search Engine Optimization),首屏问题 , 页面较少,且预渲染相对于SSR比较简单,预渲染可以极大的提高网页访问速度。而且配合一些meat插件,完全可以满足SEO需求。
预渲染流程
预渲染原理
在webpack打包结束并生成文件后(after-emit hook),会启动一个server模拟网站的运行,用puppeteer(谷歌官方的 headless 无头浏览器)访问指定的页面route,得到相应的html结构,并将结果输出到指定目录,过程类似于爬虫。
预渲染不适用经常变化的数据,比如说股票代码网站,天气预报网站。因为此时的数据是动态的,而预渲染时已经生成好了dom节点。如果要兼容seo可以使用SSR。 预渲染不适用大量的路由页面,比如成千上百个路由,此时打包后预渲染将会非常慢。 预渲染最好的应用场景是需要seo的活动页面,配合vue-meta-info插件优化meta标签,开箱即用。
安装
npm install --save prerender-spa-plugin
prerender-spa-plugin中有puppeteer,可能会报错:
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.
此时可以试试淘宝镜像安装:
cnpm install --save prerender-spa-plugin
因为在执行安装的过程中需要执行install.js,这里会下载Chromium,官网建议是进行跳过,我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium (因为封网,直接下载会失败)
npm i --save puppeteer --ignore-scripts
然后手动下载Chromium
解压到你当前项目中的node_modules/puppeteer/.local-chromium/mac-571375下就可以了
配置
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill','./src/main.js']
}
}
webpack.prod.conf.js
开始我这样写
const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
plugins: [
...
new PrerenderSpaPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'),
// Required - Routes to render
// 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
routes: [ '/', '/about', '/some/deep/nested/route'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
renderAfterTime: 5000, //触发渲染的时间,用于获取数据后再保存渲染结果
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event',
// 会等待class为my-app-element的dom节点生成功之后再进行预渲染(使用document.querySelector)
// renderAfterElementExists: 'my-app-element',
})
})
]
开发目录main.js
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>',
render: h => h(App),
/* 这句非常重要,否则预渲染将不会启动 */
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
就可以在dist文件夹下生成对应路由的文件夹里面包含页面预渲染信息的html
//比如PrerenderSPAPlugin中的 routes: [ '/','/home/homePage']
就会生成下面这样的路径
``` bash
dist
│ ├── home
│ │ └── index.html
│ ├── homePage
│ └── index.html
├── index.html
└── static
结合管理头部标签插件vue-meta-info
main.js中加
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
页面的vue中加metaInfo信息
export default {
metaInfo: {
title: 'We Inc',
meta: [
{
name: 'keywords',
content: '关键字1,关键字2,关键字3'
},
{
name: 'description',
content: '这是一段网页的描述'
}
]
}
}
就可以将关键字预渲染到html的页面中去
渲染结束遇到的问题
1. Uncaught ReferenceError: webpackJsonp is not defined
发现是config/index.js
assetsPublicPath: '/', //路径是/不是./
这里要强调一点如果你的assetsPublicPath设置成'www.xxx.com',生成的html是没有内容的而且插件vue-meta-info的设置的信息也不会加载出来
如果是/找到js文件的话,生成这种带你写的结构的html
2. 解决vuex requires a Promise polyfill in this browser问题
添加 babel-polyfill 插件
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
//entry: {app: './src/main.js'}
entry: {
app: ['babel-polyfill','./src/main.js']//babel-polyfill会仿效一个完整的 ES2015+ 环境,并意图运行于一个应用中而不是一个库/工具。
}
}
3. 刷新总是会闪一下首页
这个是服务端渲染后,样式文件没跟上导致的,css要提取成一个文件就好了,了解一下这个plugin ExtractTextPlugin。