使用vite + SSR使用依赖碰到document is not defined的解决方法

最新推荐文章于 2024-03-25 09:14:50 发布
最新推荐文章于 2024-03-25 09:14:50 发布
阅读量2.1k 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44800563/article/details/120077553
版权
本文介绍了在使用Vite进行SSR时遇到`document is not defined`错误的解决办法，通过条件判断避免在服务器端使用document对象，特别是在处理vue-cookie-next依赖中的document.cookie时。
摘要由CSDN通过智能技术生成

通过import.meta.env.SSR去判断

在vue-cookie-next依赖里用了document.cookie，判断逻辑如下

//某代码逻辑里
if (!import.meta.env.SSR) {
    // ... 仅在客户端执行的逻辑
    const name = cookie.getCookie('username')
    USER = { name }
}

即可消除报错

YoRHa_6BZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron-vite引入vue-router控制台报错require is not defined
weixin_42097259的博客
07-10 436
但为什么添加了vue-router它就报错呢，其实是因为路由里面加载了这个页面，而且默认页面就是这个，所以看起来就像是添加了vue-router才导致的报错，其实不然！2.path-browserify这种方案，应该是要在代码中进行修改，这个本人就没去实验了，因为控制台报错点击进去是electron源代码报错。根据第2点，仔细思考了一番，是不是在渲染的代码里面使用了electron相关的包；Electron-vite引入vue-router后，启动报错警告，如图。把相关代码注释掉，问题就解决了。
webpack4 配置 ssr 环境遇到“document is not defined”
10-16
主要介绍了webpack4 配置 ssr 环境遇到“document is not defined”，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vitepress 打包遇到windows为undefiend的问题
weixin_43990297的博客
03-20 1632
vitepress 打包遇到windows为undefiend的问题
vuepress打包报错document is not defined
weixin_43794749的博客
10-25 2977
给组件库写一个说明文档，但是打包部署时报错：document is not defined 也是查了资料才了解到原因，因为 VuePress 在打包时是通过 Node.js 服务端渲染，因为 Node.js 里没有 document 对象，所以就报错了。最终解决办法如下： .vuepress/enhanceApp.js文件夹 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //之..
nuxt SSR应用使用vue-infinite-scroll: error: document is not defined
peach
03-13 2085
情景 case 代码链接, ant-design-vue官方实例没有使用SSR所以正常运行 解决方案 Solve 因为是nuxt.js的出使用者，对配置都还不熟悉，所以会出现这种问题。 在前端项目目录的plugins里添加 vue-infinite-scroll.js import Vue from 'vue'; import infiniteScroll from 'vue-infinit...
记录 Vite 报错 process is not defined 报错问题
freedomlulux的博客
04-23 1万+
Vite 报错 process is not defined 报错问题、global is not defined的问题
vite+vue3使用模块化批量发布Mockjs接口
最新发布
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite+vue3动态模块化导入并使用pinia
03-25
在"vite+vue3动态模块化导入并使用pinia"的项目中，我们可以通过以下步骤实现动态模块化导入和使用Pinia： 1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
zipe:Vite + SSR =拉链
03-20
:warning:实验-目前仅支持渲染条目文件，没有特殊的SSR处理，将在下一版本中投入使用 是“快速的” :high_voltage:但是它可以在服务器上渲染的速度有多快？ zipe将动态编译组件并对其进行缓存，如果组件发生更改，...
vue服务端渲染ssr 报错 window is not definded解决
热门推荐
gaoqiang1112的博客
06-13 1万+
多数是因为服务端渲染 页面是又后台路径跳转过来的 此时页面还没有渲染出来 所以window对象还没有诞生 但是你的用的各种第三方js文件 有很多都使用了window 所以我们通过vue的生命周期函数去判断window对象 其实此时加不加载并不影响 添加判断即可 // 引入需要window的外置js if (typeof window !== 'undefined') {...
解决服务端渲染程序SSR运行时报错： ReferenceError: document is not defined
jiaohuizhuang6019的博客
12-05 1516
解决服务端渲染程序SSR运行时报错： ReferenceError: document is not defined
ReferenceError: document is not defined
Y2000104的博客
08-28 2023
webpack打包:npm install ；出现 “ document is not defined ” 错误 解决方法：查找 index.art 页面是否引入了 " <script> " 标签，删除即可
vue-ssr服务器渲染开发的时候，npm vue引入的组件，报错window或者document 没有定义的解决方案。
life_wanghexu的博客
07-05 1551
一般引入组件报错。是因为组件里面涉及调用浏览器的东西，比如window。document等。而ssr是服务器渲染，还没到浏览器客户端渲染这个环境。所以要想成功引入组件，也就是让npmVue组件可以SSR支持...
vue ssr 报错 ReferenceError: MouseEvent is not defined / window is not defined 等等
jclee95的个人博客
04-14 1573
可以将需要用到的 浏览器 对象 放入 vue 的某些生命周期钩子，让他们处于客户端渲染阶段，如放入 mounted。当然你也可以使用这样的方式将一些浏览器全局对象绑定，不过滥用这些对象又回到了 客户端渲染，需要自己依据情况进行甄别。在使用服务端渲染时（基于Vue+vite），将在普通vue项目的组件复制过来，出现了。在使用 node 服务端进渲染期间 使用浏览器运行时中的的全局对象是不存在的。注意这个报错不是 ts 的，因此并不是没有使用。，如果仅仅是在类型注释中使用了。
Vite打包时将CSS注入到JS
xiaomaerc的博客
09-19 1469
插件: vite-plugin-css-injected-by-js。
vuepress 引入 iconfont.js 打包时报错 window is not defined
Miss_Liang的博客
08-20 3591
vuepress 引入 iconfont.js 打包时报错 window is not defined 情景复现 在 enhanceApp.js 中直接引入 iconfont.js ，npm run docs:build 的时候会报 window is not defined 错误，查看 iconfont.js 看到在函数模块化后面传入了全局变量 window 出现问题的原因 当开发 V...
vitepress builld报错
weixin_44876807的博客
03-25 654
官方的这种两种解决方案，在项目里面试了下还是不行，不知道是不是因为vitepress的版本问题，当前使用的是1.0.0-alpha.13.。由于使用的第三方组件内部会使用到document和window，vitepress打包的时候，在服务端渲染的情况下没有document和window，就导致的打包报错。：使用vitepress展示自定义的组件，之前build是没有问题了，由于新增了qr-code以及quill富文本组件，导致打包时报错。在我们封装组件库的地方使用vue的动态组件进行二次的封装。
vue3 vite 使用 新版高德地图 AMapUI is not defined
05-24
在 Vue3 和 Vite 中使用高德地图时，可能会遇到 `AMapUI is not defined` 的问题，这是因为 AMapUI 依赖于 jQuery 和 Bootstrap，需要手动在项目中引入这两个库。 可以按照以下步骤解决问题： 1. 在 `index.html` 中引入 jQuery 和 Bootstrap： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My App</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.3/js/bootstrap.min.js"></script> <script type="module" src="/src/main.js"></script> </body> </html> ``` 2. 在 `main.js` 中引入 AMapUI： ```javascript import AMapUI from 'AMapUI' Vue.use(AMapUI) ``` 注意，如果使用的是 `vue-router`，需要在路由跳转时销毁 AMapUI 实例，否则可能会出现内存泄漏问题： ```javascript import { createRouter, createWebHistory } from 'vue-router' import AMapUI from 'AMapUI' const router = createRouter({ history: createWebHistory(), routes: [ // ... ] }) router.beforeEach((to, from, next) => { AMapUI.loadUI(['misc/PathSimplifier'], (PathSimplifier) => { PathSimplifier.prototype.clearPathNavigators() }) next() }) ``` 以上步骤应该可以解决 `AMapUI is not defined` 的问题，如果还有其他问题，可以提供详细的错误信息和代码，便于更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值