资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue服务端渲染demo将vue-cli生成的项目转为ssr

vue服务端渲染demo将vue-cli生成的项目转为ssr

whinc / 2037人阅读

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。

目录结构

-no-ssr-demo 未做ssr之前的项目代码用于对比

-vuecli2ssr 将vuecli生成的项目转为ssr

-prerender-demo 使用prerender-spa-plugin 的预渲染demo

-readme-images readme文件的几个图片

ssr是什么

服务器端将Vue组件直接渲染未html字符串,发送至浏览器,最后在浏览器中混合为可交互的应用程序

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

为什么要用

更好的 SEO

更快的内容到达时间(time-to-content)

怎么做

vue-server-renderer

Nuxt.js

是一个参考了 React.js 栈下的 Next.js 的一个更高封装接口的 SSR 框架。它封装了一层和 vue-router、vuex 及 webpack 设置这一层需求，可以快速开发 SSR.

Prerendering

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器
实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你
的前端作为一个完全静态的站点。
如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。

缺点

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊处理，

才能在服务器渲染应用程序中运行。

涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于
Node.js server 运行环境。

更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用
CPU 资源(CPU-intensive - CPU 密集)，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。

注意事项

如果你打算为你的vue项目在node使用 SSR，那么在通用代码中，我们有必要并且需要遵守下面的这些约定：

通用代码: 在客户端与服务器端都会运行的部分为通用代码。

注意服务端只调用beforeCreat与created两个钩子，所以不可以做类似于在created初始化一个定时器，然后在mounted或者destroyed销毁这个定时

器，不然服务器会慢慢的被这些定时器给榨干了因单线程的机制，在服务器端渲染时，过程中有类似于单例的操作，那么所有的请求都会共享这个单例的操作，所以应该使用工厂函数来确保每个请求之间的独立性。

如有在beforeCreat与created钩子中使用第三方的API，需要确保该类API在node端运行时不会出现错误，比如在created钩子中初始化一个数据请求

的操作，这是正常并且及其合理的做法。但如果只单纯的使用XHR去操作，那在node端渲染时就出现问题了，所以应该采取axios这种浏览器端与服务器端
都支持的第三方库。

最重要一点: 切勿在通用代码中使用document这种只在浏览器端可以运行的API，反过来也不可以使用只在node端可以运行的API。

疑惑

如何与中间层结合

结构预览

图片见github

实现过程

图片见github

应用 坑

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 30): Error: connect ECONNREFUSED 127.0.0.1:80

控制台抛 uncaught ，这是多么贴心的功能。以前都是默默吃掉这个异常的，在一个项目里 debug 简直醉人。

https://www.zhihu.com/questio...

2.http-proxy-middleware connect ECONNREFUSED 127.0.0.1:80

解决方法
１. 将node服务器端口改成　127.0.0.1:80

将接口服务器端口改成　127.0.0.1:80

将asyncData方法使用的请求url加上域名+端口，如下所示

export default {
  asyncData ({ params }) {
    return axios.get(`https://127.0.0.1:3000/api/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

参考: Nuxt ServerError connect ECONNREFUSED 127.0.0.1:80 错误解决

3.axios 将post请求数据转为formdata

axios({
            url: "/api/index/getIndexlbt",
            method: "post",
            data: {
              relevanceId:this.$route.params.id,
              pictureType:4
            },
            transformRequest: [function (data) {
              let ret = ""
              for (let it in data) {
                ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&"
              }
              return ret
            }],
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })

4.Computed property "currentPage" was assigned to but it has no setter

 // currentPage () {
            //     return store.state.currentPage
            // }

            currentPage: {
                get: function () {
                    return store.state.currentPage
                },
                set: function () {
                }
            }

https://segmentfault.com/q/10...
https://github.com/ElemeFE/mi...

5.vuex 的dispatch和commit提交mutation的区别

很简单，一个异步操作与同步操作的区别。

当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。
其他使用commit即可。

vue中更改state的值

参考资料 官方资料

vue-ssr

ssr适合多页 还是 单页

https://github.com/vuejs/vue-...

https://github.com/hilongjw/v...

理解ssr

简单的 Vue SSR Demo

Vue项目SSR改造实战

从零开始搭建vue-ssr系列之二：Client端渲染以及webpack2+vue2踩坑之旅

从零开始搭建vue-ssr系列之三：服务器渲染的奥秘

好文推荐

Vue项目SSR改造实战 可参考性比较强

史上最详细易懂的vue服务端渲染（ssr）教程 可以简单理解,对于后期搭建好想没啥大用

让vue-cli初始化后的项目集成支持SSR

vue-hackernews-2.0 源码解读 对项目整体结构说明,可以结合官方demo查看更佳

Vue 全站服务器渲染 SSR 实践

详解 Vue & Vuex 实践 掘金的项目实战

vuex

官方文档：

vuex action介绍

vuex2-demo demo不错

vuex-demo

可参考的demo

官方demo 官方demo,大而全,存在接口墙的问题

vnews 解决官方demo无法访问的问题, 功能类似vue-hackernews-2.0, 只不过内容源换成掘金网站，因而无法使用service worker的push功能。

Beauty 听说挺好,但是没有尝试

其他

mmf-blog vuejs 2.0 服务端渲染 v2版

vue-cnode-mobile

问题:

组件的异步加载模式,2.router,store为什么要改成 异步

应用程序的代码分割或惰性加载，有助于减少浏览器在初始渲染中下载的资源体积，可以极大地改善大体积 bundle 的可交互时间 (TTI - time-to-interactive)。这里的关键在于，对初始首屏而言，"只加载所需"。

如何不跳转页面 验证异步路由的优势

10次测试时间对比

每个开发人员都要配置ssr环境

单页面多页面结构

怎么跟中间层结合

源码

项目整体

no-ssr-demo

vuecli2ssr

prerender-demo

有帮助请点个star!

GPU云服务器 云服务器 vue-cli vue-cli3 将html转为dom js将转为二进制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94065.html

相关文章

  • php，vue，vue-ssr 做出来的页面有什么区别？

    摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏 目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段...

    yibinnn 评论0 收藏0

  • php，vue，vue-ssr 做出来的页面有什么区别？

    摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏 目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段常用的...

    vpants 评论0 收藏0

  • 手把手教你搭建SSR(vue/vue-cli + express)

    摘要：最近简单的研究了一下，对已经有了一个简单的认知，主要应用于单页面应用，是很不错的框架。创建好之后，在命令行直接输入即可，当控制台显示服务已启动则表示该服务已经启动成功了。配置参数中有一项为这项配置的就是我们即将使用的模板。 最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是...

    liangdas 评论0 收藏0

  • 从零开始搭建一个vue-ssr（下）

    摘要：开始改建补充安装依赖与上一次不同，这次我们基于进行改建，已经有了很多依赖库了，但我们任需要补充一个核心修改客户端的配置修改文件，添加插件添加了这个配置以后，重新启动项目通过地址就可以访问到，页面中出现的内容就是所需要的。 从零开始搭建一个vue-ssr 前言 上次我们已经实现了从零开始，搭建一个简单的vue-ssr的demo：从零开始搭建一个vue-ssr（上）。那么这次呢，我们基于v...

    Jochen 评论0 收藏0

  • 从零开始搭建一个vue-ssr（上）

    摘要：从零开始搭建一个背景是什么全拼是，服务端渲染。大家不妨可以打开一些页面或者一些公司的网站，查看源代码，你会发现，也是有这个标记。这时候，我们发现页面的路由切换生效了，并且不同页面的源代码也不一样了。从零开始搭建一个下项目源码 从零开始搭建一个vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服务端渲染。 所谓服务端渲染，指的是把...

    Winer 评论0 收藏0

发表评论

登陆后可评论

0条评论

whinc

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<