vue服务端渲染操作简单入门实例分析-创新互联

本文实例讲述了vue服务端渲染操作。分享给大家供大家参考，具体如下：

站在用户的角度思考问题，与客户深入沟通，找到梁河网站设计与梁河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖梁河地区。

想到要学习vue-ssr的同学，自不必多说，一定是熟悉了vue，并且多多少少做过几个项目。然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好。

话不多说，笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事！！！

一，首先实现下官网的基本案例

随便建一个目录，然后执行npm init初始化项目，生成工程文件package.json；创建server.js；然后按照vue-ssr官方链接：https://ssr.vuejs.org/zh/basic.html教程里面介绍的server.js，复制教程里面代码，如下

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
 const app = new Vue({
  data: {
   url: req.url
  },
  template: `<div>访问的 URL 是： {{ url }}</div>`
 })
 renderer.renderToString(app, (err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(`
   <!DOCTYPE html>
   <html lang="en">
    <head><title>Hello</title></head>
    <body>${html}</body>
   </html>
  `)
 })
})
server.listen(8080)

本文标题：vue服务端渲染操作简单入门实例分析-创新互联
网站URL：https://www.cdcxhl.com/article14/dpjdge.html

成都网站建设公司_创新互联，为您提供网页设计公司、软件开发、网站设计公司、网站制作、手机网站建设、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容