关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “

问题说明

最近刚开始用上vite开发项目，结果就遇到了很多坑。

其中一个是，vite 项目 执行 “vite build” 并部署上线后，在浏览器中访问就会有以下关于路由的奇怪问题：

我们用嵌套路由开发的页面生成的路径，个别菜单在初次加载、或者二次刷新加载时，都会报错如：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

解决流程：

当然是先去官方github的issue里看下有没有人遇到同样的问题：

Issues · vitejs/vite · GitHubNext generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.https://github.com/vitejs/vite/issues?q=text%2Fhtml一搜还真的有：

https://github.com/vitejs/vite/issues/4260https://github.com/vitejs/vite/issues/4260

但是高兴太早，好像他的问题和我的问题原因不太一样，因为解决方案里说router的component引入的路由文件要带“.vue”后缀，但我的都有，还是有同样的问题。（大家可以对照这个方案，看下你的代码是不是这个原因。）

继续研究我的问题，控制台报错有给sourceMap，能看到是因为哪个文件报错的。我根据文件路径，在“network”里发现，这些报错的文件都有一个通病：

1、路径不对；2、Content-Type不对。

很明显路径上的dashboard就是多出来的一块、错误的路径。当我从根路径刷新favicon文件的第一次加载路径是对的，但如果我在dashboard这个路径下的某个文件执行刷新时，favicon就会报这个错误了。说明，他加载静态资源时，相对路径是上一级、而不是根路径导致的。

 

解决方案：

抱着试一试的态度，我找到vite关于静态资源路径的配置：配置 Vite | Vite 官方中文文档 下一代前端开发与构建工具https://cn.vitejs.dev/config/#base

根据官网的说明文档，我将代码修改如下（VITE_PUBLIC_PATH变量在vite.config.js中引用了）

1、变量路径改为：'/'

这个路径之前的设置是“./”，但是官网说了，“./”是用于开发环境的

 

2、将vite的配置base修改为刚才设置的路径

 

---

再次部署后，以上问题解决了。嵌套路由、多层路径、多层路径下刷新，都不会报着个错误了。 

希望可以帮助到大家。