微客导航 » 文章资讯 » Vue 2.0 服务端渲染入门介绍

Vue 2.0 服务端渲染入门介绍

2024-02-26 14:33:18 313

1什么是服务端渲染SSR

serversiderender

就是通过后端吐模板，而不是通过前端ajax获取数据，拼接字符串。

2为什么需要SSR

需要SEO，因为爬虫不会等待ajax结果。

客户端网络慢，加载速度慢，影响用户体验。

3另一种解决办法预渲染

不是一次性下载整个单页应用，预渲染只是在构建时为了特定的路由生成特定的几个静态页面

你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染

4NodeJS编写Vue的SSR

首先npminstall--save-dev的有vueexpressvue-server-renderer

//server.js

'usestrict';

varfs=require('fs');
varpath=require('path');

global.Vue=require('vue')

varlayout=fs.readFileSync('./index.html','utf8')

varrenderer=require('vue-server-renderer').createRenderer()

varexpress=require('express')
varserver=express()

server.use('/assets',express.static(
path.resolve(__dirname,'assets')
))


server.get('*',function(req,res){

//将Vue实例渲染成HTML
renderer.renderToString(
//创建一个应用实例
require('./assets/app')(),

//处理渲染结果
function(error,html){
if(error){
console.error(error);
returnres
.status(500)
.send('ServerError')
}
//发送布局和HTML文件
res.send(layout.replace('

',html)) } ) }) server.listen(5000,function(error){ if(error)throwerrorr; console.log('Serverisrunningatlocalhost:5000') })

//index.html





Document

app.$mount('#app')

//assets/app.js

(function(){
'usestrict'
varcreateApp=function(){
returnnewVue({
template:'你已经在这花了{{counter}}秒。

', data:{ counter:0 }, created:function(){ varvm=this; setInterval(function(){ vm.counter+=1; },1000) } }) } //暴露接口 if(typeofmodule!=='undefined'&&module.exports){ module.exports=createApp }else{ this.app=createApp() } }).call(this)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue 2.0 服务端渲染入门介绍

热门推荐

随机推荐