Published on

prerender-spa-plugin:Vue-seo爬坑

Authors
  • avatar
    Name
    Hansuku
    Twitter

这段时间在做一个新 SaaS，单点登录架构，然后这个项目有一个面向大众的首页，于是在项目已经写了一个星期的时候我突然意识到，SEO 可能是个问题 我们的后台是 php 写的，介于这到底是个 SaaS 项目，只有几个页面需要给爬虫爬，不会也不需要考虑全局去开启 ssr，于是看到了这个东西prerender-spa-plugin，他可以在你打包项目的时候帮你预渲染出来，从而做到 seo 的效果

  • 高高兴兴安装，悲悲伤伤百度
// 安装 npm install --save-dev prerender-spa-plugin
// 使用vue-router请把路由改成history模式
// vue-cli构建的项目请前往build/webpack.prod.conf.js 否则webpack.config.js
// 引入预渲染
const PrerenderSpaPlugin = require('prerender-spa-plugin')
// 在plugins中使用
new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: ['/'], // 要渲染的路由
})

上面按照官方给出的方法配置，然后npm run build 先是一坨报错，然后卡在 build 卡了很久很久，最后没办法所以掐掉了 一翻查询以后 发现 prerender 是依靠 Puppeteer 实现的，关于 Puppeteer 的介绍点这里 另外还有个 Chromium 的报错，在安装的时候 Puppeteer 会自动去下载 Chromium，但是由于东方的某种神秘力量，没能下载下来... 尝试了几种方法安装、翻墙，还是没有效果，然后看了看 Vue 官方的一个栗子(原来 prerender 是 vue 的核心开发人员做的)

new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, '../dist'),
  // List of endpoints you wish to prerender
  ['/']
)

跟 prerender 官方给出的文档写法不一样，继续搜索（吐槽一下百度，有个掘金的文章在百度搜不到，Google 一模一样的关键词搜出来了） - Vue SPA 项目 SEO 优化之预渲染 Prerender-spa-plugin 这篇文章给我的提示，版本问题 npm install prerender-spa-plugin@2.1.0 --save 然后去 webpack.prod.conf.js 修改成上面 vue 官方那种写法 完！事！了！ 去 dist 上查看首页 都渲染出来了

  • 另外需要设置 meta 信息的话，搭配vue-meta-info口味更佳哦
Discuss on Twitter • View on GitHub
*/}