由于公司某些页面要做SEO优化(搜索和加载优化),另外一些页面耦合很低的落地面分享面但又不想单独拆出去,之前也用ssr尝试过并不是十分友好,所以这次看了预渲染的介绍,发现在现vue项目上成本很并且非常的适合
特点
访问预渲染出来的页面在访问时与SSR一样快,并且它将服务端编译HTML的时机提前到了构建时,因此也降低了服务端的压力。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站,比如电商网站。
- 基于vue-cli3
- prerender-spa-plugin
- puppeteer
文章是基于一个新项目,老项目只需要配置插件即可
vue create my-project
先创建一个项目,随便选一下就行
npm install prerender-spa-plugin --save-dev 安装插件
ps: 还需要puppeteer 才可以否则build会报错
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i puppeteer
插件配置
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/product','/about'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
main 配置
new Vue({
el: '#app',
render: h => h(App),
mounted() { // 需要配置这个属性
document.dispatchEvent(new Event('render-event'))
}
})
最后
这时候执行npm run build就可以生成刚刚配置在PrerenderSPAPlugin插件中routes中的页面html了,这过程中会一闪而过的短暂打开chromium浏览器,不用管。
ps router的mode 一定要是history模式
网友评论