给大家推荐一个vue 单页面搜索引擎无法SEO的解决办法
这两天用Vue3做了一个免费下载书籍的小网站，https://book.usejs.cn；大家可以先看下效果
前端项目做完、部署了之后想让搜索引擎能够收录一下我的这个网站，可是众所周知的是，vue做的网页都是单页面程序，搜索引擎SEO的时候对这个的支持极不友好，特别是某度，听说谷歌、必应已经开始支持单页面网页了，yes！
说回对SEO的支持；接下来我就开始在网上找相关的解决办法。网上的文章大都是说用nuxt服务端渲染的方法，但由于我之前做过一个nuxt的玩具项目，因为服务器性能原因最后放弃了。而且vue项目转nuxt有点麻烦，这个方法我就不考虑了；
然后我又在网上继续找，最后发现一篇文章说的一个方法很精妙，当普通用户正常的时候服务器返回单页面程序，检测到爬虫的时候就用puppeteer这个库返回已经加载好了的html；我一看这个方法可行性很高，因为前段时间玩了很久的puppeteer，不用担心不会用；
方法找到了接下来开始干活了；当我准备自己写代码的时候，发现已经有了一个rendertron库，给大家说戏使用方法
rendertron使用方法
首先全局安装rendertron
npm i rendertron -g// 然后直接在命令行里面执行rendertron就可以了默认端口3000在浏览器里面输入
http://127.0.0.1:3000/render/https://book.usejs.cn就能渲染爬取后的页面html页面了，render后面接的需要渲染的单页面网址；
准备好了之后就是创建一个服务作为中介，遇到爬虫的时候就返回rendertron渲染后html代码了；
官方的推荐是使用express代码如下
// server/index.jsconst express = require('express');// rendertron express 官方中间件const rendertron = require('rendertron-middleware');const app = express();// history 路由兼容中间件const history = require('connect-history-api-fallback'); // 这个插件很有用let port = process.env.PORT || 8080;// 注册中间件 默认是 /index.htmlapp.use(history());app.use(rendertron.makeMiddleware({ proxyUrl: 'http://127.0.0.1:3000/render', // 默认rendertron是3000端口}));// spa项目打包完成的目录app.use(express.static('dist')); // 静态目录设置一定要在makeMiddleware 中间使用的后面app.listen(port, function () { console.log('http://127.0.0.1:' + port); console.log('listening to ' + port);});完活
react应该也能使用
下一期给你们说在linux上服务器部署代码，遇到的各种各样的坑；如puppeteer安装、运行，没有字体等；
最后这个网大家可以看一下rendertron效果
免费下载书籍的小网站，https://book.usejs.cn；
这是最后完成的网站，大家可以访问看下效果，普通访问返回的都是vue单页面内容，当请求头是爬虫的时候返回的就是加载完成的html，使用apipost可以看到效果