vue ssr

服务端渲染（SSR）报错 ReferenceError: MouseEvent is not defined

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/130152398

1. 错误描述

在使用服务端渲染时（基于Vue+vite），将在普通vue项目的组件复制过来，出现了 MouseEvent is not defined 报错，其原文如下：

ReferenceError: MouseEvent is not definedat setup (D:/desktop/aaaaaaa/src/components/switchs/Switch.vue:36:12)at _sfc_main.setup (/src/components/switchs/Switch.vue:61:23)at callWithErrorHandling (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+runtime-core@3.2.45\\node_modules\\@vue\\runtime-core\\dist\\runtime-core.cjs.js:157:22)at setupStatefulComponent (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+runtime-core@3.2.45\\node_modules\\@vue\\runtime-core\\dist\\runtime-core.cjs.js:7176:29)at setupComponent (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+runtime-core@3.2.45\\node_modules\\@vue\\runtime-core\\dist\\runtime-core.cjs.js:7131:11)at renderComponentVNode (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+server-renderer@3.2.45_vue@3.2.45\\node_modules\\@vue\\server-renderer\\dist\\server-renderer.cjs.js:172:17)at Proxy.ssrRenderComponent (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+server-renderer@3.2.45_vue@3.2.45\\node_modules\\@vue\\server-renderer\\dist\\server-renderer.cjs.js:624:12)at _sfc_ssrRender (/src/App.vue:91:31)at renderComponentSubTree (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+server-renderer@3.2.45_vue@3.2.45\\node_modules\\@vue\\server-renderer\\dist\\server-renderer.cjs.js:254:17)at renderComponentVNode (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+server-renderer@3.2.45_vue@3.2.45\\node_modules\\@vue\\server-renderer\\dist\\server-renderer.cjs.js:188:16)at Proxy.renderToString (D:\\desktop\\aaaaaaa\\node_modules\\.pnpm\\@vue+server-renderer@3.2.45_vue@3.2.45\\node_modules\\@vue\\server-renderer\\dist\\server-renderer.cjs.js:450:26)at render (D:/desktop/aaaaaaa/src/entry-server.ts:12:21)at async file:///D:/desktop/aaaaaaa/server.js:54:22

在一个 vue 组件中，有大概如下的代码：

const emit = defineEmits({"click": (evt: MouseEvent) => evt instanceof MouseEvent,
})const slider = ref(null);const baseColor = useCssVar('--base-color', slider);// 这里是报错的位置：
const evt = new MouseEvent("click", {bubbles: true,cancelable: true,view: window,
});

其实类似的可能还有这样的报错：window is not defined…。

2. 报错原因

注意这个报错不是 ts 的，因此并不是没有使用 lib:["dom"]，如果仅仅是在类型注释中使用了 MouseEvent，是没有问题的。比如：

const emit = defineEmits({"click": (evt: MouseEvent) => evt instanceof MouseEvent,
})

原因在于：

在使用 node 服务端进渲染期间 使用浏览器运行时中的的全局对象是不存在的。

3. 解决方案

可以将需要用到的 浏览器 对象 放入 vue 的某些生命周期钩子，让他们处于客户端渲染阶段，如放入 mounted。

例如在 setup 语法下，上面使用到 MouseEvent 的代码可以这样略加修改：

let evt:MouseEvent;onMounted(()=>{evt = new MouseEvent("click", {bubbles: true,cancelable: true,view: window,})
})

当然你也可以使用这样的方式将一些浏览器全局对象绑定，不过滥用这些对象又回到了 客户端渲染，需要自己依据情况进行甄别。