美文网首页
记录 rendertron 实战 Vue SPA单页面应用解决S

记录 rendertron 实战 Vue SPA单页面应用解决S

作者: 或许丶Again | 来源:发表于2020-07-21 13:45 被阅读0次

    具体参考官方文档 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 = [
    ];
    
    // 注册中间件  默认是 /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
    
    image
    npm run buid
    npm run start
    

    通过postman 测试得到渲染完成后的dom节点

    image

    相关文章

      网友评论

          本文标题:记录 rendertron 实战 Vue SPA单页面应用解决S

          本文链接:https://www.haomeiwen.com/subject/qqsikktx.html