1. 错误描述
在使用服务端渲染时（基于Vue+vite），将在普通vue项目的组件复制过来，出现了 MouseEvent is not defined 报错，其原文如下：
ReferenceError: MouseEvent is not defined at 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, }) })
当然你也可以使用这样的方式将一些浏览器全局对象绑定，不过滥用这些对象又回到了 客户端渲染，需要自己依据情况进行甄别。
