从0到1构建vueSSR项目之node以及vue-cli3的配置

原创 Fly丶 教程 vue专题 55阅读 19 天前 举报

前言

上一次做了路由的相关配置,原本计划今天要做vuex部分,但是想了想,发现vuex单独的客户端部分穿插解释起来很麻烦,所以今天改做服务端部分。

服务端部分做完,再去做vuex的部分,这样就会很清晰。

vue ssr是分两个端,一个是客户端,一个是服务端。

所以要做两个cli3的配置。

那么下面就直接开始做吧。

修改package.json的命令

修改vue.config.js配置

添加完相关脚本命令之后,我们开始改造cli3配置。
首先要require('vue-server-renderer')
然后再根据VUE_NODE环境变量来决定编译的走向以及生成不同的环境清单

先做cli3服务端的入口文件

这里是cli3的配置

node相关配置

用于node渲染 必然要拦截get请求的。然后根据get请求地址来进行要渲染的页面。

官方提供了vue-server-renderer插件

大概的方式就是 node拦截所有的get请求,然后将获取到的路由地址,传给前台,然后使用router实例进行push

再往下面看之前 先看一下官方文档

创建BundleRenderer
createBundleRenderer

将 Vue 实例渲染为字符串。
renderToString

渲染应用程序的模板
template

生成所需要的客户端或服务端清单
clientManifest

先创建 服务端所需要的模板

node部分

先创建三个文件

  • index.js //入口
  • proxy.js //代理
  • server.js //主要配置

做完这一步之后,就可以预览基本的服务渲染了。
后面就只差开发环境的配置,以及到node数据的传递(vuex)

最终目录解构:

最后

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

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

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

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

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

赶紧努力消灭 0 回复