Failed to fetch dynamically imported module

问题描述

在使用 Vue/Vite 的标准配置时，你可能会遇到 TypeError: Failed to fetch dynamically imported module 错误。这个错误通常出现在生产环境部署后，特别是在路由层面使用动态导入组件时：

export const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'), // 动态导入
      children: [
        {
          path: '/overview',
          component: () => import('@/views/Overview.vue'), // 动态导入
        },
      ],
    },
  ],
});

该错误的特点是：

仅出现在部署后的环境，本地开发环境通常不会出现
与部署时间相关性很高，通常在部署新版本后出现

错误原因

Vite 在构建时会为动态导入的组件创建单独的代码块（chunks），默认情况下这些文件的名称会根据内容进行哈希处理（如 Overview.abc123.js）。

当组件代码发生变化时，哈希值也会改变（如 Overview.32ab1c.js）。错误发生的典型场景如下：

你部署了应用程序
客户端访问你的网站
你修改了代码并重新部署
之前的哈希命名的文件已被新的哈希命名文件替换
客户端点击链接尝试加载旧版本的文件时，发现文件不存在

解决方案

1. 使用 Vue Router 错误处理（推荐）

Vue Router 4

import { createRouter } from 'vue-router'

const router = createRouter({
  // 路由器配置
})

router.onError((error, to) => {
  if (
    error.message.includes('Failed to fetch dynamically imported module') ||
    error.message.includes('Importing a module script failed')
  ) {
    // 避免无限重定向
    if (!to?.fullPath) {
      window.location.reload()
    } else {
      window.location = to.fullPath
    }
  }
})

export default router

工作原理

当检测到动态导入模块失败时，这个错误处理程序会触发页面完全重新加载，强制浏览器获取最新的资源文件。

2. 使用 Vite 预加载错误事件

从 Vite 4.4 开始，可以使用内置的预加载错误事件：

window.addEventListener('vite:preloadError', (event) => {
  // 例如，刷新页面
  window.location.reload()
})

版本要求

此功能需要 Vite 4.4 或更高版本，请确保你的项目已更新。

3. 开发环境解决方案

在开发环境中，这个问题通常可以通过清理缓存来解决：

bash

# 停止开发服务器
rm -rf node_modules/.cache node_modules/.vite
# 重新启动开发服务器
npm run dev

4. 检查文件名和扩展名

确保导入语句中的文件扩展名正确：

// 错误 ❌
import MyComponent from 'components/MyComponent'

// 正确 ✅
import MyComponent from 'components/MyComponent.vue'

5. 排除特定依赖的预优化

如果使用 Vuetify 等大型 UI 库，可以尝试排除它们的预优化：

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['vuetify']
  }
})

6. 微前端应用注意事项

如果是微前端架构，确保目标应用正在运行，因为路由可能指向其他独立的应用程序。

预防措施

实施适当的缓存策略：使用 Service Worker 和 Workbox 管理客户端缓存
考虑静态导入：对于小型应用，可以使用静态导入避免此问题
版本控制：确保资源文件的版本管理策略合理

总结

Failed to fetch dynamically imported module 错误主要是由部署后资源文件哈希变化导致的。最佳解决方案是使用 Vue Router 的错误处理机制，配合适当的缓存策略和开发实践，可以有效地解决和预防这个问题。

注意

避免在生产环境中使用会导致无限重定向的解决方案，始终检查目标路径是否存在。

根据你的具体应用场景和架构，选择最适合的解决方案，可以显著改善用户体验并减少部署相关的错误。

相关文章

Failed to fetch dynamically imported module ​

问题描述 ​

错误原因 ​

解决方案 ​

1. 使用 Vue Router 错误处理（推荐） ​

2. 使用 Vite 预加载错误事件 ​

3. 开发环境解决方案 ​

4. 检查文件名和扩展名 ​

5. 排除特定依赖的预优化 ​

6. 微前端应用注意事项 ​

预防措施 ​

总结 ​