vue3 ssr报错window is not defined

Question

1:07:21 AM [vite] Error when evaluating SSR module /src/router/index.ts:
ReferenceError: window is not defined
    at useHistoryStateNavigation (/Users/mango/Desktop/imgbucket/web/node_modules/vue-router/dist/vue-router.cjs.js:505:35)
    at Proxy.createWebHistory (/Users/mango/Desktop/imgbucket/web/node_modules/vue-router/dist/vue-router.cjs.js:597:31)
    at /Users/mango/Desktop/imgbucket/web/src/router/index.ts:8:13
    at async instantiateModule (/Users/mango/Desktop/imgbucket/web/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50286:9)

跟着这篇文章做的SSR
然后node server.js就报这个错误了
vue-router版本4.0.12
history: createWebHistory()
请问要怎么解决？

Answer 1

你应该只在客户端下使用这个组件, nodejs肯定没window这对象啊
不在客户端下可以用require引入.
template尝试使用vue-client-only

<client-only>
    
</client-only>

Answer 2

分清楚环境，虽然 ssr 可以共享大部分代码，但实际上会处于两个运行环境。静态渲染的部分在 node.js 里，有 process.env，没有 window；页面的部分浏览器里，有 window，没有 process.env。对于其它库来说，有些是纯 js 的，放在哪里都行；有些则依赖环境 API，比如 vue-router，要用到 history pushState，所以就依赖 window。

这种情况你要好好看文档，区分开运行环境，不要信马由缰的写。