解决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,一经查实,立即删除!

相关文章

【总结】ES 7.x 配置用户名和密码访问(亲测可用)

目录 1.关闭es分片迁移2.修改配置文件,开启x-pack验证3.重启elasticsearch服务4.生成CA授权证书,配置certs5.修改es配置文件,追加以下内容6.再次重启ES每个节点。7.执行设置用户名和密码的命令8.最后放开es分片迁移9.FQA9.1 Postman 访问不了ES9.2 curl 访问不了ES9.3 elast…

踩坑记录:uniapp中scroll-view的scroll-top不生效问题;

情景描述: 最近在uniapp项目中用到scroll-view内置组件,有需求是在页面下拉刷新后,让scroll-view组件区域的显示内容置顶,也就是scroll-view区域的内容恢复不滑动的状态; 补充:下拉刷新操作scroll-view组件…

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

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

22.括号生成

​题目来源: leetcode题目,网址:22. 括号生成 - 力扣(LeetCode) 解题思路: 当只有一对括号时,结果为 "()",当有 n(n>1) 对括号时,其结果是在 n-1 对括号的…

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

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

java实现根据远程url下载文件到浏览器

本文提供 java实现根据远程url下载文件到浏览器片段代码,仅供参考。 可以实现,根据远程url地址下载推送至浏览器下载,这个方法可以解决因前端直接调用远程url下载出现的跨域问题。 /*** 根据远程url下载文件* param url 远程URL* param resp…

pytorch学习5-最大池化层的使用

系列文章目录 pytorch学习1-数据加载以及Tensorboard可视化工具pytorch学习2-Transforms主要方法使用pytorch学习3-torchvisin和Dataloader的使用pytorch学习4-简易卷积实现pytorch学习5-最大池化层的使用pytorch学习6-非线性变换(ReLU和sigmoid)pytorc…

如何零成本创建微信公众号版的自助查券返利机器人?

如何零成本创建微信公众号版的自助查券返利机器人? 在当今的电商时代,网购已经成为人们日常生活中不可或缺的一部分。然而,寻找商品优惠券和返利却是一件让人头疼的事情。为了解决这个问题,我们可以借助微信公众号和微赚淘客系统…

微信淘宝客自动查券找券返利机器人实现的原理和思路探索

微信淘宝客自动查券找券返利机器人实现的原理和思路探索 在当今的电商时代,网购已经成为人们日常生活中不可或缺的一部分。然而,寻找商品优惠券和返利却是一件让人头疼的事情。为了解决这个问题,我们可以借助微信公众号和微赚淘客系统来实现…

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

群体遗传 — 核苷酸多样性π **核苷酸多样性(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…

ffmpeg与opencv-python处理视频

安装 opencv pip install opencv-pythonFFmpeg 1.下载 FFmpeg 访问FFmpeg官方网站。选择 “Windows builds from gyan.dev” 链接,这会带您到一个包含最新版本 FFmpeg Windows 构建的页面。选择一个适合您系统的版本(例如,32位或64位&…

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

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