Vue SSR服务端渲染(一)

ssr服务端渲染

学习之前推荐一款非常方便插件nodemon，写完后热更新运行的当前文件。运行命令将node替换成nodemon即可。

1.创建server.js文件，引入依赖包

var http = require('http')
var vue = require('Vue')
var serverRenderer = require('vue-server-renderer')

2.创建vue实例

var app = new Vue({
    template: `

                
    
`,
    components: {
        myComponent: {
            template: `
this is ssr !!!
`
        }
    }
})

3.创建Renderer实例

var renderer = serverRenderer.createRenderer()

4.将Vue实例转化成HTML字符串
我们先可以打印html看看

renderer.renderToString(app,function(err,html){
    console.log(html) // html 将是注入应用程序内容的完整页面
})

结果：

this is ssr !!!

对renderer.renderToString进行改造如下

httt.createServer((req, res) => {
  renderer.renderToString(app,(err,html) => {
      res.end(`
                    
                    
                          
                          
                          
                          
                  
                  
                      ${html}
                  
                  `)
        })
}).listen(3000)

5.将html模板给提取出来，虽然这样写也可以，但是看起来不简洁，先改造server.js

// 改造第三步，nodeJS的FS模块同步读取文件
var renderer = serverRenderer.createRenderer({
      template: require('fs').readFileSync('./index.template.html','utf-8');
})；
// 改造第四步
http.createServer((req, res) => {
    renderer.renderToString(app,function (err, html) {
        res.end(html)
    })
}).listen(3000)

6.创建 index.template.html文件，注意这不是注释，这是应用程序将html代码注入的地方，vue-ssr-outlet左右不能有空格，不然会报错。

7. renderer.renderToString 中 第2个参数 可以在模版里面init 进去你要添加的标签如下.

http.createServer((req, res) => {
    renderer.renderToString(app, {
        init: ``
    }, function (err, html) {
        res.end(html)
    })
}).listen(3000)

index.template.html代码

    
    
    
    


    {{init}} 
    {{{init}}}
    

运行结果：
{{}} => 类似于vue双括号效果，页面显示` }, function (err, html) { res.end(html) }) }).listen(3000)