Nuxt SSR部署到子目录出现appendChild DOMException报错如何解决

这个appendChild报错是Nuxt SSR场景下典型的客户端水合（Hydration）失败错误：服务端渲染返回的HTML结构，和客户端侧脚本初始化时生成的虚拟DOM结构不匹配，Vue尝试挂载客户端节点时找不到符合要求的父节点，最终抛出该异常。

你场景下的核心问题来自配置错误：

• 生产环境router.base配置完全错误：你明确将应用部署在/my-app-homepage子目录下，但生产环境的base被配置为根路径/，导致客户端路由前缀和服务端渲染的路由前缀不一致，直接触发水合不匹配
• 静态资源路径配置错误：build.publicPath配置为带完整域名的绝对路径，同域部署场景下不需要带完整域名，路径规则和路由base不匹配会导致静态资源加载异常
• 接口请求路径配置错误：axios.browserBaseURL配置为根路径下的/api，实际接口在子目录下，请求路径不匹配会触发接口404，进一步影响页面渲染
• 页面表单action硬编码子目录路径，存在和配置不一致的风险

1. 修正路由base配置
   将router配置改为如下，生产和开发环境都保持子目录前缀：

router: {
  base: '/my-app-homepage/',
},

如果需要动态适配，也可以通过环境变量传入，绝对不要出现生产环境base为/的情况。

2. 修正静态资源publicPath配置
   不需要拼接完整域名，直接基于路由base配置即可：

build: {
  publicPath: '/my-app-homepage/_nuxt/',
  // 动态写法：publicPath: `${router.base}_nuxt/`,
  // 其余原有配置保持不变
}

3. 修正axios请求路径配置
   接口路径统一加上子目录前缀：

publicRuntimeConfig: {
  axios: {
    browserBaseURL: '/my-app-homepage/api',
  },
},
privateRuntimeConfig: {
  axios: {
    baseURL: process.env.API_HOST || 'http://localhost:3000/my-app-homepage',
  },
},

4. 修正页面表单硬编码路径
   将模板中的form action改为动态绑定，避免和配置不一致：

<form :action="`${$router.options.base}api/todos`" enctype="multipart/form-data" method="post">
  <!-- 其余原有表单内容保持不变 -->
</form>

5. 校验express侧路由规则
   确保express服务将所有/my-app-homepage前缀的请求都转发给Nuxt实例处理，不要只监听根路径的请求。

内容的提问来源于stack exchange，提问作者robskrob