社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
具体参考官方文档 https://github.com/GoogleChrome/rendertron
全局安装
npm install -g rendertron
项目安装
// 使用 express 作为服务端框架,配合官方提供的 rendertron-middleware中间件,开箱即用
// vue history 路由兼容中间件 connect-history-api-fallback
npm i express rendertron-middleware connect-history-api-fallback
// 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;
// 自定义 user-agent
const spiderUserAgents = [
'Baiduspider',
'bingbot',
'Embedly',
'facebookexternalhit',
'LinkedInBot',
'outbrain',
'pinterest',
'quora link preview',
'rogerbot',
'showyoubot',
'Slackbot',
'TelegramBot',
'Twitterbot',
'vkShare',
'W3C_Validator',
'WhatsApp',
];
// 注册中间件 默认是 /index.html
app.use(history());
app.use(rendertron.makeMiddleware({
proxyUrl: 'http://localhost:3000/render', // 默认rendertron是3000端口
userAgentPattern: new RegExp(spiderUserAgents.join('|'), 'i')
}));
// spa项目打包完成的目录
app.use(express.static('dist'));
app.listen(port, function () {
console.log('http://127.0.0.1:' + port);
console.log('listening to ' + port);
});
vue cli3 构建的项目放在 public 下面
config.json
{
"cache": "memory",
"cacheConfig": {
"cacheDurationMinutes": 120,
"cacheMaxEntries": 50
}
}
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "node server/index.js",
"lint": "vue-cli-service lint"
}
rendertron
npm run buid
npm run start
通过postman 测试得到渲染完成后的dom节点
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!