解决ssr服务端渲染程序启动报错: ReferenceError: location is not defined

现象:

原因:chatgpt给出的解释很到位:

该错误表明代码尝试访问 location 对象,该对象通常在浏览器环境中可用。

然而,你的服务器端代码正在 Node.js 环境中运行而在这个环境中 location 对象未定义

问题可能与你在服务器端使用的 Vue Router 代码有关。Vue Router 中的 createWebHashHistory 函数试图访问 location 对象,导致了这个错误。

为解决这个问题,你应该在服务器端使用不同的 history 模式。对于服务器端渲染(SSR),通常使用 createMemoryHistory 而不是 createWebHashHistory

The error you're encountering, ReferenceError: location is not defined, indicates that the code is trying to access the location object, which is typically available in a browser environment. However, your server-side code is running in a Node.js environment, where the location object is not defined.

The issue is likely related to the Vue Router code that you're using on the server side. The createWebHashHistory function from Vue Router is attempting to access the location object, which is causing the error.

To resolve this issue, you should use a different history mode on the server side. For server-side rendering (SSR), it's common to use createMemoryHistory instead of createWebHashHistory or createWebHistory. Here's how you can modify your code:

但是chatgpt给出的代码不大对:

// Change this line in your server.js file
const { createMemoryHistory } = require('vue-router');

// ...

server.get("*", async (req, res) => {

  // 这样写是没有用的
  const { app, router, store } = await App(req, createMemoryHistory());

  // ...
});
 

 解决办法: 在原始router路由定义文件中,根据SSR的环境变量动态确定使用的history模式

ssr环境使用history模式为:createMemoryHistory

浏览器环境使用history模式为:createWebHashHistory

通过VUE_APP_SSR环境变量,利用三元表达式动态确定history的模式

const router = createRouter({

  history: process.env.VUE_APP_SSR

    ? createMemoryHistory()

    : createWebHashHistory(process.env.BASE_URL),

  routes,

});

 VUE_APP_SSR环境变量通过script脚本执行时传入

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

案例046:基于微信小程序的云上考场

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

DNS协议(DNS规范、DNS报文、DNS智能选路)

目录 DNS协议基本概念 DNS相关规范 DNS服务器的记录 DNS报文 DNS域名查询的两种方式 DNS工作过程 DNS智能选路 DNS协议基本概念 DNS的背景 我们知道主机通信需要依靠IP地址,但是每次通过输入对方的IP地址和对端通信不够方便,IP地址不好记忆 因此提…

群体遗传 — 核苷酸多样性π

群体遗传 — 核苷酸多样性π **核苷酸多样性(nucleotide diversity),记为π,是分子遗传学中一个重要的概念,用于量化种群内部或不同种群间的遗传多样性。**这一概念由根井正利和李文雄在 1979 年提出。核苷酸多样性的…

2023-11-30 AIGC-让图片动起来的主流 AI 工具

摘要: 2023-11-30 AIGC-让图片动起来的主流 AI 工具 让图片动起来的主流 AI 工具 一、数字人播报 1、HeyGen 2、D-ID 3、SadTalker 二、图片生成视频 1、Runway Gen-2 2、Pika Labs 3、Genmo 三、伪3D动态效果 1、LeiaPix 2、剪映手机版 四、角色动画 Animated …

Linux各目录结构说明

文章目录 目录说明源码放哪里?拓展:Linux里面安装软件是装在home目录还是opt目录还是/usr/local好? bin boot dev etc home lib lib64 lostfound media mnt opt proc root run sbin srv sys tmp usr var 目录说明 bin 存放二进制可执行文件&…

再谈谈ThreadLocal

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 大部分面试官喜欢问Thr…

金蝶云星空表单插件获取基础资料的内码

文章目录 金蝶云星空表单插件获取基础资料的内码 金蝶云星空表单插件获取基础资料的内码 不能直接取内码 先获取基础资料数据包,再获取内码 long custId Convert.ToInt64((this.View.Model.GetValue("F_XXXX_CustId") as DynamicObject)["Id&quo…

【从零开始学习JVM | 第三篇】类的生命周期(高频面试)

前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。 在本文中,我们将深入探讨类的生命周期,从类加载到…

ros2与stm32通讯比较优秀的串口库

这个是我确定的串口库:serial: serial::Serial Class Reference (wjwwood.io) 我也不知道其他的串口库了,我就知道几个,然后我觉得这个是3个里面学习周期比较短,然后质量比较可靠的库 我隐隐觉得这个串口库就是ros1选择的串口库…

shell命令使用杂七杂八(1)——(待完善)

explainshell.com shell统计当前文件夹下的文件个数、目录个数Linux之shell常用命令(三) sort(排序)、uniq(处理重复字符) linux中shell将换行输入到文件中 shell脚本,将多行内容写入文件中 f…

PySpark开发环境搭建常见问题及解决

PySpark环境搭建常见问题及解决 1、winutils.exe问题2、SparkURL问题3、set_ugi()问题 本文主要收录PySpark开发环境搭建时常见的一些问题及解决方案,并收集一些相关资源 1、winutils.exe问题 报错摘要: WARN Shell: Did not find winutils.exe: {} ja…

批量创建/更新外协工序采购信息记录

批量创建/更新没有物料号的外协工序采购信息记录。 执行事务代码ZME1X_OP,下载模板。(此程序可同时用于外协工序的创建和修改)创建外协工序的时候如果是新建则不需要输入采购信息记录号,如果是要更新外协工序价格,则必须输入采购信息记录号。价格单位默认为‘1’,货币代码…

IPV6技术

配置广域网接入: PPP协议:点对点协议是作为点对点链路上进行IP特性的封装协议而被开发出来的。 ppp定义了IP地址的分配和管理、异步和面向位的同步封装、网络协议复用、链路配置、链路质量测试和错误检测等标准,以及网络层地址协议和数据压缩…

智能井盖倾斜预防方案,井盖监测方式推荐

随着每个城市的日益发展,城市基础设施的重要性慢慢凸显出来。其中井盖作为城市生命线的一部分,其安全问题不容小觑。为了保障市民的出行安全和城市基础设施正常运行,智能井盖传感器作为城市生命线智能监测仪有着重要的作用,该设备…

深圳锐杰金融的慈善承诺:健康社区,绿色未来

深圳市锐杰金融投资有限公司,作为中国经济特区的中流砥柱,近年来以其杰出的金融成绩和坚定的社会责任立场引人注目。然而,这并非一个寻常的金融机构。锐杰金融正在用自己的方式诠释企业责任和慈善精神,通过一系列独特的慈善项目&a…

封装ThreadLocal

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 为什么要封装ThreadLoc…

玄子Share-CSS3 弹性布局知识手册

玄子Share-CSS3 弹性布局知识手册 Flexbox Layout(弹性盒布局)是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布 主轴和交叉轴 使用弹性布局,最重要的一个概念就是主轴与…

CoDeF视频处理——视频风格转化部署使用与源码解析

一、算法简介与功能 CoDef是作为一种新型的视频表示形式,它包括一个规范内容场,聚合整个视频中的静态内容,以及一个时间变形场,记录了从规范图像(即从规范内容场渲染而成)到每个单独帧的变换过程。针对目标…

JavaScript中的this指向:如何避免常见的this陷阱

​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-this指向 目录 this指向详解 强行改变 this 指向 修改上下文中的this…

17、pytest自动使用fixture

官方实例 # content of test_autouse_fixture.py import pytestpytest.fixture def first_entry():return "a"pytest.fixture def order():return []pytest.fixture(autouseTrue) def append_first(order, first_entry):return order.append(first_entry)def test_s…