Vue组件Vite动态加载：开发环境正常，生产/SSR环境失效

问题背景 #

使用Vue 3组合式API + Vite开发，通过<component :is="componentVariable"></component>动态加载两个组件之一，尝试了三种导入方式：

• 使用defineAsyncComponent异步导入
• await异步导入
• 静态导入
  上述方式在npm run dev时均正常工作，但执行构建后，通过SSR（启动命令node bootstrap/ssr/ssr.mjs）或vite preview运行时，组件无法加载，抛出错误'Component x is not found'。

可能的原因及解决方案 #

1. SSR环境下组件路径解析异常 #

Vite构建时会优化模块路径，SSR环境中容易出现动态导入路径解析失败的情况。

• 改用显式组件映射+resolveComponent确保组件能被正确识别：

  <script setup>
  import { ref, computed, resolveComponent } from 'vue'
  import ComponentA from './ComponentA.vue'
  import ComponentB from './ComponentB.vue'
  
  const componentMap = {
    ComponentA,
    ComponentB
  }
  const componentVariable = ref('ComponentA')
  const currentComponent = computed(() => resolveComponent(componentMap[componentVariable.value]))
  </script>
  
  <template>
    <component :is="currentComponent"></component>
  </template>
  

2. 异步组件未在SSR中预加载 #

使用defineAsyncComponent时，SSR环境需要提前预加载组件，避免客户端 hydration 不匹配：

• 在SSR入口文件中提前注册异步组件：

  // ssr.mjs
  import { createSSRApp } from 'vue'
  import App from './App.vue'
  import { defineAsyncComponent } from 'vue'
  
  // 预加载并注册异步组件
  const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'))
  const ComponentB = defineAsyncComponent(() => import('./ComponentB.vue'))
  
  const app = createSSRApp(App)
  app.component('ComponentA', ComponentA)
  app.component('ComponentB', ComponentB)
  
  // 后续SSR渲染逻辑
  

3. Vite SSR构建配置缺失 #

检查vite.config.js的SSR配置，确保动态组件被纳入优化范围：

• 添加针对性的SSR优化配置：

  // vite.config.js
  export default {
    ssr: {
      optimizeDeps: {
        include: ['./ComponentA.vue', './ComponentB.vue']
      }
    }
  }
  

4. 组件名称大小写不匹配 #

开发与生产环境对组件名称大小写的处理逻辑存在差异，需保证componentVariable的值与组件注册名完全一致：

• 统一使用PascalCase命名组件，并保持变量值与组件名一致：

  <script setup>
  import ComponentA from './ComponentA.vue'
  const componentVariable = ref('ComponentA') // 名称需与导入的组件名严格匹配
  </script>
  

临时Workaround（待验证） #

若上述方案均无效，可尝试将动态组件改为同步导入并全局注册，确保构建后SSR能正确识别组件。后续会更新经过验证的可行方案。

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