Vue3打包发布,刷新出现的空白页面和错误
Vue3打包发布出现的错误：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.
第一次点击访问到这个路径：页面正常：
刷新这个页面，页面空白，点到错误上面显示文件的访问路径有问题
Vite.config.ts:这个配置base:‘/’
打包以后的index.html:
打包以后的index.html文件会自动在script和link的标签上加上./访问，这就是导致页面刷新出不来的原因
解决方案：base去掉‘.‘,因为我发布项目是在根目录下
Index.html打包之后的路径：
以下是base：'./ ' 和base：'/' 的区别：
base：'./'：
- 这意味着你的项目将以相对路径作为基础路径。
- 当你的项目部署在网站的子目录时，使用’./’是很有用的。例如，如果你的应用部署在https://example.com/my-app/，那么资源（如脚本、样式表、图片等）的路径将会相对于 my-app/ 目录。
- 使用相对路径可以避免一些路径问题，特别是当你需要在本地打开HTML文件而不是通过服务器时。
base：'/'：
- 这意味着你的项目将以根路径作为基础路径。
- 当你的项目部署在域的根目录时，使用 ‘ / ‘ 是合适的。例如，如果你的应用部署在 https://example.com/，那么资源将会从根目录加载。
- 如果你的项目部署在子目录中，但这里配置了 /，那么资源路径可能会出错，因为它们会相对于根目录而不是子目录。
- 因此，选择哪种路径取决于你的项目是如何部署的。如果你不确定项目将来会在哪里部署，或者如果你需要在本地和服务器上都可以正常工作，通常建议使用 base: './'。但是，如果你确定项目将始终部署在网站的根目录，那么使用 base: '/' 是安全的。记得根据实际部署情况调整这个配置。
原文地址：https://blog.csdn.net/weixin_44600235/article/details/140347964
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！