vuecli项目实现构建SSR服务端渲染

　　介绍

vuecli项目实现构建SSR服务端渲染?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

将一个Vue组件在服务端渲染成HTML字符串并发送到浏览器,最后将这些静态标记“激活”为可交互应用程序的过程就叫服务端渲染(SSR)

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

    <李>更好的SEO:传统的spa页面数据都是异步加载,搜索引擎爬虫无法抓取,服务端渲染(SSR)使搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,解决vue项目的SEO问题李 <>李更快的内容到达时间(首屏加载更快):请求页面时,服务端将渲染好的页面直接发送给浏览器进行渲染,浏览器只需要解析渲染HTML,无需等待所有的JavaScript都完成下载并执行,才显示服务器渲染的标记李

    <李>开发条件所限:浏览器特定的代码,只能在某些生命周期钩子函数中使用,一些外部扩展库可能需要特殊处理,才能在服务器渲染应用程序中运行 <李>涉及构建设置和部署的更多要求:与可以部署在任何静态文件服务器上的完全静态单页面应用程序(spa)不同,服务器渲染应用程序,需要处于节点。李js服务器运行环境 <>李更多的服务器端负载:在节点。js中渲染完整的应用程序,显然会比仅仅提供静态文件的服务器更加大量占用CPU资源,因此如果你预料在高流量环境下使用,需要准备相应的服务器负载,并采用缓存策略
    　　李,

如果你只是想改善少数营销页面(例如/,/,/接触等)的优化,那么你可能需要预渲染,无需使用web服务器实时动态编译HTML,而是使用预渲染方式,在构建时简单地生成针对特定路由的静态HTML文件,优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点
如果你使用webpack,你可以使用<代码> prerender-spa-plugin>

构建流程:所有的文件拥有一个公共入口<代码>应用程序。js代码> 输入服务器。js代码和客户端入口<代码> entry-client。js代码> server bundle> 客户端包>

vuecli项目实现构建SSR服务端渲染

<代码> vue-server-renderer

<代码> vue-server-renderer> createRenderer 方法,这个方法的<代码> renderToString> createBundleRenderer 方法可以通过预打包应用程序代码创建bundleRenderer实例,来渲染包和HTML模板

安装vue-server-renderer

npm安装vue-server-renderer——保存

注意:

    <李> vue-server-renderer和vue必须匹配版本 <李> vue-server-renderer依赖一些节点。js原生模块,因此只能在节点。js中使用

,

节点。js服务器是一个长期运行的进程,当我们的代码进入该进程时,它将进行一次取值并留存在内存中,这意味着如果创建一个单例对象,它将在每个传入的请求之间共享,所以我们应该暴露一个可以重复执行的工厂函数,为每个请求创建一个新的根Vue实例,如果我们在多个请求之间使用一个共享的实例,很容易导致交叉请求状态污染(同样的规则也适用于路由器,商店和事件总线实例)

<>强创建路由路由器

安装vue-router 

 npm安装vue-router——保存

在<代码> src 目录下创建路由器<代码> 文件夹和<代码>索引。js代码
在组件目录下创建家园。vue和。vue页面(根据项目需求自定义创建)

路由器/索引。js:

从“进口Vue vue" 　　从“进口路由器;vue-router" 　　 　　从“进口回家@/组件/Home" 　　从“进口对@/组件/About" 　　 　　Vue.use(路由器)//每次用户请求都需要创建一个新的路由器实例//创建createRouter工厂函数 　　出口的默认函数createRouter () {//创建路由器实例 　　返回新路由器({ 　　模式:“history", 　　路线:[ 　　｛ 　　路径:“/? 　　名称:& # 39;回家# 39; 　　组件:回家 　　}, 　　｛ 　　路径:“/about", 　　名称:& # 39;关于# 39; 　　组件: 　　} 　　] 　　}） 　　}

vuecli项目实现构建SSR服务端渲染