[Note] Vue SSR 水合作用失败坑点记录

<div id="app"></div> 根挂载节点必须要在一行不能换行⚠️

<body>
<div id="app"><!--app-html--></div>
<script>
  window.window._INITIAL_STATE__ = '<pinia-store>'
</script>
<script type="module" src="/src/entry-client"></script>
</body>

如果需要给 vue-router 添加 base，需要注意以下几点

需要给 createMemoryHistory 和 createWebHistory 添加 base
需要给 vite.config.ts 中添加 base
需要给 vite.createServer 添加 base，且需要在调用 transformIndexHtml 就将 originalUrl 做处理

// router/index.ts
const history = isServer ? createMemoryHistory(BASE_URL) : createWebHistory(BASE_URL)

// vite.config.ts
export default defineConfig({
base: '/base/'
})

// server.js
vite = await (
  await import('vite')
).createServer({
  base: BASE_URL_WITH_SLASH,
  root,
  logLevel: 'info',
  server: {
    middlewareMode: true,
    watch: {
      usePolling: true,
      interval: 100,
      port
    }
  },
  appType: 'custom'
})

const url = BASE_URL_WITH_SLASH
    ? req.originalUrl.replace(BASE_URL_WITH_SLASH, '/')
    : req.originalUrl

WJ-Yuan / Notes

[Note] Vue SSR 水合作用失败坑点记录 #11