Vue页面预渲染

发表于

通过使用页面预渲染提升加载速度及优化seo

  vue进行页面开发的时候大部分采用的是客户端渲染，将静态资源打包全部或分包部分下载到本地，渲染工作是在浏览器端进行的，这样就造成一些问题，偏重内容浏览的网站SEO就变得比较麻烦，只能在index.html页面中添加少量的站点信息。这种渲染方式带来的坏处还有页面呈现较慢，因为需要等待js下载完成并运行才能获取响应的内容。vue官方给出了服务端渲染的方案，vue ssr。

  官方讲解比较详细，这里主要说下预渲染的使用。
安装 prerender-spa-plugin 

1
npm install prerender-spa-plugin --save-dev

因为使用该插件是打包的时候生成静态页，所以进入/build/webpack.prod.config.js

prerender1

在头部引入prerender-spa-plugin

1
const PrerenderSPAPlugin = require('prerender-spa-plugin')

找到plugins:[] 在里面添加如下代码

1
2
3
4
5
6
new PrerenderSPAPlugin({
  // Required - The path to the webpack-outputted app to prerender.
  staticDir: path.join(__dirname, '../dist'),
  // Required - Routes to render.
  routes: ['/', '/service', '/solution', '/download', '/partner', '/trylogin', '/function/assistant', '/function/management', '/function/warning', '/m'],
})

routes可以指定生成的路由地址，这个是最基础的配置，在github上面有比较详细的配置。配置完成打包项目就会生成对应配置路由的静态页面。
prerender2