从0到1构建vueSSR项目之路由的构建

原创 Fly丶 教程 vue专题 44阅读 23 天前 举报

vue开发依赖的相关配置

Vue SSR 指南

今天先做客户端方面的配置,明天再做服务端的部分。

那么马上开始吧~

修改部分代码

脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码

修改main.js

为什么要这么做?为什么要避免状态单例 

main.js 是我们应用程序的「通用 entry」。

在纯客户端应用程序中,我们将在此文件中创建根 Vue 实例,并直接挂载到 DOM。

但是,对于服务器端渲染(SSR),责任转移到纯客户端 entry 文件。

main.js 简单地使用 export 导出一个 createApp 函数:

添加Vue.config.js配置

webpack的入口文件有两个,一个是客户端使用,一个是服务端使用。

为何这么做? 

今天只做客户端部分。

根目录创建 entry 文件夹,以及webpack入口代码

路由和代码分割

官方说明的已经很清楚了,我就不做过多介绍了,下面直接展示代码

添加新路由,这里将存放pages的相关路由

src/pages/router/index.js

src/router.config.js作为路由的总配置 易于管理

更新main.js

更新 client.js
由于使用的路由懒加载,所以必须要等路由提前解析完异步组件,才能正确地调用组件中可能存在的路由钩子。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复