使用 Inertia Vue3 进行服务端渲染时应注意:

  1. 按照 官方文档 说明配置前后端;
  2. resources/js/app.jsresources/js/ssr.js 写法一致,ssr.js 中不需要引入服务端用不到的代码,比如进度条 @inertiajs/progress;但其他如 resolve 按名称解析 Inertia 组件部分以及路由库 Ziggy 写法均需要一致;
  3. Vue 单文件组件不要写 <style></style> 代码块部分(即时里面的样式代码为空),它会在 document 中插入对应的样式代码,在服务端中 window 和 (window.)document 均不存在,因此会报错。直接将其编译为 CSS 文件在页面头部中引入即可;
  4. 如果使用软链接引入 Vue 组件或库,需要在 mix webpack 配置项中添加 symlinks: false
    mix.webpackConfig({
        resolve: {
            symlinks: false, // 解决使用软链接引入时报错
        }
    })