vue项目实现seo优化之ssr(1)-vue-server-renderer

vue-server-renderer 使用:

  • 1.创建一个新项目vuessr
  • 2.npm init 初始化
  • 3.安装依赖 npm install vue vue-server-renderer --save
  • 4.创建index.js:
    // 1.创建一个vue实例
    const Vue = require('vue')
    const app = new Vue({
        template: '<div>ni hao ya<div>'
    })

    // 2.创建一个renderer (渲染器)
    const renderer = require('vue-server-renderer').createRenderer()

    // 3.将vue实例渲染为html
    renderer.renderToString( (app,html) => {
        console.log(html)
    })
  • 5.控制台输出 node index.js
    <div data-server-rendered="true">ni hao ya<div>
  • 6.安装依赖 npm install express --save
  • 7.创建app.js:
    const Vue = require('vue')
    const server = require('express')()
    const renderer = require('vue-server-renderer').createRenderer()

    // 1.创建服务
    server.get('*', (req,res) => {
        const app = new Vue({
            data: {
                url: req.url
            },
            template: `<div>访问的url是:  {{ url }} </div>`
        })

        // 2.返回模板
        renderer.renderToString(app, (err,html) => {
            if(err) return res.status(500).end('Internal Server Error')
            // 为防止乱码,设置编码
            res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})
            res.end(`
                <!DOCTYPE html>
                <html lang="zh">
                    <head>
                        <title>vue ssr</title>
                    </head>
                    <body>
                        ${html}
                    </body>
                </html>
            `)
        })
    })

    // 3.监听端口
    server.listen(8080)
  • 8.运行node app.js
  • 9.打开浏览器输入localhost:8080/test,右键查看源代码,会看到内容显示出来了
  • 10.改写，因为直接拼接html代码是不优雅的,容易出错,创建index.template.html文件如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>ssr</title>
</head>

<body>
    <!--vue-ssr-outlet-->
</body>

</html>
  • 11.修改app.js,修改后的app.js
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: require('fs').readFileSync('./index.template.html','utf-8')
})

server.get('*', (req,res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的url是: {{url}}</div>`
    })

    renderer.renderToString(app, (err,html) => {
        if(err) return res.status(500).end('Internal Server Error');
        // 设置编码,防止乱码
        res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
        res.end(html)
    })

})

server.listen(8080)
  • 12.运行 node app.js,能正常运行且输出内容
  • 13.支持模板插值操作,修改index.template.html如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>{{ title }}</title>
    {{ meta }}
</head>

<body>
    <!--vue-ssr-outlet-->
</body>

</html>
  • 14.修改index.js文件如下:
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: require('fs').readFileSync('./index.template.html','utf-8')
})

const context = {
    title: 'ssr',
    meta: `
        <meta charset="utf-8">
    `
}

server.get('*', (req,res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template:  `<div>访问的url是： {{ url }}</div>`
    })

    renderer.renderToString(app, context, (err,html) => {
        if(err) return res.status(500).end('Internal Server Error');
        res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
        res.end(html)
    })
})

server.listen(8080)
  • 15.如上,node index.js,访问localhost:8080,页面输出,插入的title和meta正常显示,右键查看源代码内容显示正常
posted @ 2019-10-16 14:43  zoo-x  阅读(490)  评论(0)    收藏  举报