prerender-spa-plugin:Vue-seo爬坑

      发布在:Notes, 前端技术      评论:0 条评论

这段时间在做一个新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
prerender-spa-plugin:Vue-seo爬坑
先是一坨报错,然后卡在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官方那种写法
prerender-spa-plugin:Vue-seo爬坑
完!事!了!
去dist上查看首页
prerender-spa-plugin:Vue-seo爬坑
都渲染出来了
prerender-spa-plugin:Vue-seo爬坑

Responses