基于webpack4搭建Vue服务端渲染(SSR)
发布日期:2021-09-12 09:57:49 浏览次数:50 分类:技术文章

本文共 822 字,大约阅读时间需要 2 分钟。

前言

   了解服务端渲染是偶然间一位朋友问了我Nuxt.js的问题,孤陋寡闻的我竟然不知道服务端渲染是什么!赶紧利用空余时间充电,了解大概后觉得正好能解决我当前正遇到的问题,随着我项目的功能逐步扩展首屏加载白屏越来越明显,正好利用这个机会看能不能做些优化,当然服务端渲染能带来的好处不仅限于此,如果当你看到这篇博客的时候你还不了解服务端渲染,那我建议你可以先看看,当然随着现在发展,很多网站的入口已经由百度搜索变成公众号推广、二维码等等,好像SEO变得不在那么重要,大家根据自己需求做取舍吧。

Vue SSR 指南

    Vue官网的我建议还是认真的通读一遍,有几个点你要特别注意下,首先Vue的服务端渲染依靠的是vue-server-renderer,那这个包运行环境依赖Node.js的模块,所以这是比较重要的一点你要有node的一些基础,因为服务端渲染整不好就报500别出了问题hold不住,当然部署也需要考虑。路由和数据存储官方的建议使用vue-router和vuex,官方已经给出了一个SSR的,webpack是基于3+版本来做的,如果升级到4需要一些配置更改,强烈建议有一定webpack基础的同学再来搞webpack升级,而且babel也是7版本一下,不过babel比较好搞定的。

先来个Demo

    我在学习的过程中也clone了HackerNews Demo,该项目中的news请求api一直请求不了,不知道是墙的原因还是这个api接口暂停了,所以官方的demo我就没跑起来。按着他的思路我试着自己搭建一下,webpack4和babel7更改比较大,也学习了很多,我已经把我自己搭建的纯净版本放在了github上,我会慢慢更新加入更多有趣的东西,为什么叫纯净版,因为它只能运行起来什么都还没加入,方便如果有搭建有些问题的小伙伴,我将pure分支作为纯净版本,为什么要先放demo,你先试一下能否运行,运行不起来那这篇博客对你没什么参考价值。

转载地址:https://blog.csdn.net/weixin_38361925/article/details/88976776 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:VS Code汉化与代码格式化
下一篇:nodejs调试工具 node-inspector

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月26日 11时26分50秒