【技术实现步骤摘要】
本专利技术涉及页面渲染领域，尤其涉及一种基于nuxt组件的网页渲染方法、设备及存储介质。
技术介绍
1、静态网站生成技术在现代web开发中扮演着重要角色，它能够将动态内容预先渲染成静态文件，从而提高网站性能和搜索引擎优化(seo)。而nuxt.js是一个基于vue.js的通用应用框架组件，能够轻松实现服务器端渲染(ssr)和静态站点生成(ssg)。
2、目前，开发者在使用nuxt.js进行静态站点生成时，面临一些技术挑战和不便之处。nuxt.js默认情况下生成的静态站点文件包含大量冗余代码和不必要的资源，导致文件体积过大；并且，对于一些复杂的应用场景，nuxt.js的静态站点生成方案可能不够灵活，无法满足特定需求。因此，针对当前nuxt组件进行网页渲染时数据较大且灵活度较低的问题，需要一种技术来解决当前的问题。
技术实现思路
1、本专利技术的主要目的在于解决当前nuxt组件进行网页渲染时数据较大且灵活度较低的技术问题。
2、本专利技术第一方面提供了一种基于nuxt组件的网页渲染方法，包括步骤：
3、在预置nuxt组件中配置splitchunks数据，得到网页分割设置nuxt组件；
4、在所述网页分割设置nuxt组件中配置webpack压缩插件，得到网页压缩设置nuxt组件；
5、在预置网页浏览器中配置http缓存参数，在所述网页压缩设置nuxt组件中配置路由参数，得到路由nuxt组件，以及将所述路由nuxt组件加载至所述网
6、当所述网页浏览器接收网页渲染地址时，则基于所述路由nuxt组件，对所述网页渲染地址进行条件渲染处理，得到渲染网页。
7、可选的，在本专利技术第一方面的第一种实现方式中，所述在预置nuxt组件中配置splitchunks数据，得到网页分割设置nuxt组件包括：
8、在预置nuxt组件的配置文件中，配置build.splitchunks数据，并将splitchunks属性设置为true，得到网页分割设置nuxt组件。
9、可选的，在本专利技术第一方面的第二种实现方式中，所述在所述网页分割设置nuxt组件中配置webpack压缩插件，得到网页压缩设置nuxt组件包括：
10、在所述网页分割设置nuxt组件的配置文件中添加optimization.minimizer选项，设置terser-webpack-plugin压缩javascript，设置css-minimizer-webpac k-plugin压缩css，得到网页压缩设置nuxt组件。
11、可选的，在本专利技术第一方面的第三种实现方式中，所述在预置网页浏览器中配置http缓存参数包括：
12、在预置网页浏览器中，配置cache-control和expires响应头，以便所述网页浏览器能缓存数据生成静态文件。
13、可选的，在本专利技术第一方面的第四种实现方式中，所述配置cache-control和expires响应头，还包括：
14、设置cache-control的生效周期。
15、可选的，在本专利技术第一方面的第五种实现方式中，所述基于所述路由nuxt组件，对所述网页渲染地址进行条件渲染处理，得到渲染网页包括：
16、在所述路由nuxt组件中，使用vue.js的条件渲染和组件复用功能，对所述网页渲染地址进行条件渲染处理，得到渲染网页。
17、可选的，在本专利技术第一方面的第六种实现方式中，在所述基于所述路由nuxt组件，对所述网页渲染地址进行条件渲染处理，得到渲染网页之后，还包括：
18、基于vue库的props机制，对所述路由nuxt组件的参数进行调整处理，得到新的路由nuxt组件。
19、可选的，在本专利技术第一方面的第七种实现方式中，所述在所述网页压缩设置nuxt组件中配置路由参数，得到路由nuxt组件包括：
20、利用route.params获取路由参数；
21、在所述网页压缩设置nuxt组件中配置所述路由参数，得到路由nuxt组件。
22、本专利技术第二方面提供了一种基于nuxt组件的网页渲染设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于nuxt组件的网页渲染设备执行上述的基于nuxt组件的网页渲染方法。
23、本专利技术的第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的基于nuxt组件的网页渲染方法。
24、在本专利技术实施例中，通过设置代码压缩方式和http缓存方式，减小生成的静态文件体积，提高网站加载速度，提供灵活的定制化页面生成逻辑，满足各种复杂应用场景的需求，解决了当前nuxt组件进行网页渲染时数据较大且灵活度较低的技术问题。
本文档来自技高网...【技术保护点】
1.一种基于Nuxt组件的网页渲染方法，其特征在于，包括步骤：
2.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，所述在预置Nuxt组件中配置splitChunks数据，得到网页分割设置Nuxt组件包括：
3.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，所述在所述网页分割设置Nuxt组件中配置webpack压缩插件，得到网页压缩设置Nuxt组件包括：
4.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，所述在预置网页浏览器中配置HTTP缓存参数包括：
5.根据权利要求4所述的基于Nuxt组件的网页渲染方法，其特征在于，所述配置Cache-Control和Expires响应头，还包括：
6.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，所述基于所述路由Nuxt组件，对所述网页渲染地址进行条件渲染处理，得到渲染网页包括：
7.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，在所述基于所述路由Nuxt组件，对所述网页渲染地址进行
8.根据权利要求1所述的基于Nuxt组件的网页渲染方法，其特征在于，所述在所述网页压缩设置Nuxt组件中配置路由参数，得到路由Nuxt组件包括：
9.一种基于Nuxt组件的网页渲染设备，其特征在于，所述基于Nuxt组件的网页渲染设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；
10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8中任一项所述的基于Nuxt组件的网页渲染方法。
...【技术特征摘要】
1.一种基于nuxt组件的网页渲染方法，其特征在于，包括步骤：
2.根据权利要求1所述的基于nuxt组件的网页渲染方法，其特征在于，所述在预置nuxt组件中配置splitchunks数据，得到网页分割设置nuxt组件包括：
3.根据权利要求1所述的基于nuxt组件的网页渲染方法，其特征在于，所述在所述网页分割设置nuxt组件中配置webpack压缩插件，得到网页压缩设置nuxt组件包括：
4.根据权利要求1所述的基于nuxt组件的网页渲染方法，其特征在于，所述在预置网页浏览器中配置http缓存参数包括：
5.根据权利要求4所述的基于nuxt组件的网页渲染方法，其特征在于，所述配置cache-control和expires响应头，还包括：
6.根据权利要求1所述的基于nuxt组件的网页渲染方法，其特征在于，所述基于所述路由n...
【专利技术属性】
技术研发人员：唐士瀛，黄德安，陈子文，李坪，
申请(专利权)人：深圳市麦田守护科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。