记录 rendertron 实战 Vue SPA单页面应用解决SEO问题

具体参考官方文档 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);
});

网站根目录下面配置config.json

vue cli3 构建的项目放在 public 下面

config.json

{
    "cache": "memory",
    "cacheConfig": {
        "cacheDurationMinutes": 120,
        "cacheMaxEntries": 50
    }
}

package.json

"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节点

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值