给大家推荐一个Vue 单页面程序无法SEO的解决办法

给大家推荐一个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.js
const 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.html
app.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可以看到效果