服务端渲染

2024/4/11 20:29:21

Nuxt 菜鸟入门学习笔记三:视图

文章目录 入口文件组件 Components页面 Pages布局 Layouts Nuxt 官网地址: https://nuxt.com/ Nuxt 提供多个组件层来实现应用程序的用户界面。 入口文件 App.vue组件 Components页面 Pages布局 Layouts 下面逐一进行介绍。 入口文件 默认情况下,Nu…

解决服务端渲染程序SSR运行时报错: ReferenceError: document is not defined

现象: 原因: 该错误表明在服务端渲染 (SSR) 过程中,有一些代码尝试在没有浏览器环境的情况下执行与浏览器相关的操作。这在服务端渲染期间是一个常见的问题,因为在服务端渲染期间是没有浏览器 API。 解决办法: 1. 修…

搭建自己的SSR

Vue SSR介绍 是什么 官方文档:https://ssr.vuejs.org/Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解 决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈 官方文档…

Nuxt 菜鸟入门学习笔记:路由

文章目录 路由 Routing页面 Pages导航 Navigation路由参数 Route Parameters路由中间件 Route Middleware路由验证 Route Validation Nuxt 官网地址: https://nuxt.com/ 路由 Routing Nuxt 的一个核心功能是文件系统路由器。pages/目录下的每个 Vue 文件都会创建一…

解决nuxt3报错:The requested module xxx does not provide an export named ‘PropType‘

现象如下: 从表象上就是typescript找不到PropType的类型声明 原因:这是vue3已知的type类型导入时存在的一个问题,而且一直没有得到解决 No matching export for import typescript interface Issue #2117 vitejs/vite GitHub 代码里面导…

VueCli的Nuxt重构

我的博客用vuecli写的,SEO不忍直视。于是用Nuxt重构了代码,过程中踩了无数坑 一:body样式不生效 正常的body样式设置不能生效,需要在nuxt.config.js中配置 1、设置bodyAttrs的class属性,该属性值对应一个类名 2、该…

解决nuxt3中vue3生命周期钩子onMounted不执行的问题

看到这篇文章算你运气好!因为只有我才能给你答案!看到就赚到,这就是缘分 因为vue3迁移nuxt3是一个非常困难和痛苦的过程,中间会有各种报错,各种不兼容,各种乱七八糟但是你又找不到答案的问题。 而且你一定…

Nuxt 菜鸟入门学习笔记四:静态资源

文章目录 public 目录assets 目录全局样式导入 Nuxt 官网地址: https://nuxt.com/ Nuxt 使用以下两个目录来处理 CSS、fonts 和图片等静态资源: public 目录 public 目录用作静态资产的公共服务器,可通过应用程序定义的 URL 公开获取。 换…

解决vue ssr服务端渲染运行时报错:net::ERR_PROXY_CONNECTION_FAILED

现象: 从代码里找了半天也没有找到问题,但是由于ssr服务端渲染配置本身非常复杂,步骤又繁琐, 而且报错又很多,不知道哪里出了问题。 感觉是header或者cookie丢失造成的,因为据说ssr本身有这样的缺陷&…

Nuxt 菜鸟入门学习笔记五:CSS 样式

文章目录 本地样式表在组件内导入通过 Nuxt 配置 CSS 属性导入使用字体导入通过 NPM 发布的样式表 外部样式表动态添加样式表【高级】使用 Nitro 插件修改渲染的头部 使用预处理器单文件组件 SFC 样式类和样式绑定使用 v-bind 的动态样式Scoped StylesCSS Modules预处理器支持 …

前后端分离多年,为何服务端渲染(SSR)重回风口浪尖?

前后端分离多年,为何服务端渲染(SSR)重回风口浪尖? 什么是服务端渲染? 咱们先搞明白个事儿,啥叫服务端渲染?服务端渲染的全称是 Server-Side Rendering,简称SSR。 简单说&#xf…

2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?

文章目录0.客户端渲染什么是客户端渲染?客户端渲染的优缺点是什么?优点缺点客户端渲染的使用场景是什么?1.服务器渲染什么是服务器渲染?服务器渲染的优缺点是什么?优点缺点服务端渲染的使用场景是什么?2.预渲染什么是预渲染?预渲染的优缺点是什么?优点缺点预渲染的使用…

Nuxt 菜鸟入门学习笔记六:路由

文章目录 路由 Routing页面 Pages导航 Navigation路由参数 Route Parameters路由中间件 Route Middleware路由验证 Route Validation Nuxt 官网地址: https://nuxt.com/ 路由 Routing Nuxt 的一个核心功能是文件系统路由器。pages/目录下的每个 Vue 文件都会创建一…

vue之服务端渲染(SSR)

目录 一、认识 SSR二、创建一个 SSR 应用三、客户端激活四、代码结构五、第三方解决方案六、vue 提供的 SSR API1、renderToString()2、renderToNodeStream()3、pipeToNodeWritable()4、renderToWebStream()5、pipeToWebWritable()6、renderToSimpleStream()7、useSSRContext()…

修改npm源码解决服务端渲染环境中localstorage报错read properties of undefined (reading getItem)

现象: 这个问题是直接指向了我使用的第三方库good-storage,这是一个对localStorage/sessionStorage做了简单封装的库,因为项目代码有一个缓存cache.ts有用到 原因分析: 从表象上看是storage对象找不到getItem方法, 但…

Nuxt重构的填坑之路

我的个人网站是用vuecli写的,SEO不忍直视。于是用Nuxt重构了代码,过程中踩了无数坑,记录如下 一:body样式不生效 正常的body样式设置不能生效,需要在nuxt.config.js中配置 1、设置bodyAttrs的class属性,…

服务端渲染技术之Nuxt.js的详细使用

服务端渲染技术之Nuxt.js的详细使用服务端渲染Nuxt.js概述创建Nuxt工程目录结构路由基础路由动态路由路由参数校验嵌套路由视图默认布局自定义布局异步数据asyncData方法返回对象返回Promise使用async或awaitAxios拦截创建拦截插件调用插件使用vuex/store管理数据创建状态管理文…