Vue 2.7.14+Vite：本地正常组件生产环境显示<!---->

背景 #

页面中导入了多个异步组件，组件注册代码如下：

export default defineComponent({
  components: {
    ClickToEdit: () => import('@/components/form/ClickToEdit.vue'),
    PlaceRankSettings: () => import('@/views/placerank/components/PlaceRankSettings.vue'),
    LoadingPanel: () => import('@/components/form/LoadingPanel.vue'),
    ...
  },

模板中使用目标组件的代码：

<PlaceRankSettings
  :loading="loading"
  @select="updateViewMode"
/>

问题 #

Vite本地开发时所有组件渲染正常，但执行vite build打包后，PlaceRankSettings组件渲染结果为<!---->。尝试用async/await、defineAsyncComponent包裹导入均无效，其余组件可正常渲染。

可能的原因及解决方向 #

• 路径大小写不匹配：本地开发环境（Windows/macOS）默认不区分文件大小写，路径大小写错误不会触发问题，但打包部署到Linux等区分大小写的环境时，会因文件找不到导致组件加载失败。检查导入路径的大小写是否和实际文件路径完全一致，比如placerank是否实际是PlaceRank，文件名PlaceRankSettings.vue是否是placeRankSettings.vue。
• 组件内部初始化报错：打包后组件在初始化阶段抛出未捕获的错误，导致渲染失败。可以：
  • 打开浏览器控制台查看打包后的页面是否有报错信息；
  • 在PlaceRankSettings组件的created或mounted钩子中添加console.log('组件加载')，打包运行后查看控制台是否有输出，确认组件是否被正确加载。
• 组件命名冲突：检查全局组件中是否有同名的PlaceRankSettings，导致局部注册的异步组件被覆盖。尝试将组件重命名后导入使用，比如改为PlaceRankSettingsLocal，验证是否能正常渲染。
• Vite打包配置异常：检查vite.config.js的build配置：
  • 查看optimizeDeps.exclude是否误包含了该组件的路径；
  • 确认tree-shaking是否误将组件标记为无用代码，可以在组件导入语句前添加/* vite-ignore */注释，排除tree-shaking影响。
• 组件导出错误：确认PlaceRankSettings.vue的导出方式是否正确，必须通过export default defineComponent({ ... })导出组件，而非仅导出局部变量或错误的导出形式。

内容的提问来源于stack exchange，提问作者anti-destin