Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”.-CSDN博客

本文链接：https://blog.csdn.net/sinat_37255207/article/details/124522179

博客介绍了在使用Vue3和vite进行项目开发时遇到的一个打包后路由切换偶发报错的问题，该问题是由于vite的兼容性bug导致。作者提供了一个通过使用`defineAsyncComponent`来解决此问题的方案，但指出在某些旧版Edge浏览器中仍可能存在问题。更新提到，在升级到Vite3.x后，该问题已得到解决，经过多浏览器测试未再触发错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+vite打包以后，项目切换路由触发（偶发触发）报:

After using vue-router, there is an error in packaging and running # Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to fetch dynamically imported module…

Alt

确实应该是vite2.xx的bug https://github.com/vitejs/vite/issues/863

注意: 在使用vue3+vite时候,只发现vue-router切换时触发此现象

问题:

// vue3+vite此种异步路由引入方法 开发调试时确实没有问题,但是vite打包以后就会触发报错
routes: [
    {
      path: "/",
      name: "Home",
      component: import(`../views/${view}.vue`)
    }
]

解决方法:

// 这样引用虽然解决了问题（浏览器会提醒,不用管）,但是在一些win10自带的低版本edge浏览器中还是会稀有触发
// 应该确实是vite的兼容性bug问题
import { defineAsyncComponent } from 'vue'; //异步组挂载器
routes: [
    {
      path: "/",
      name: "Home",
      component: defineAsyncComponent(() => import('../views/Home.vue'));
    },
    {
      path: "/about",
      name: "About",
      component: defineAsyncComponent(() => import('../views/About.vue'));
    }
]