Vue3打包发布,刷新出现的空白页面和错误

时间:2024-07-11 14:46:58

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:'./':

  1. 这意味着你的项目将以相对路径作为基础路径。
  2. 当你的项目部署在网站的子目录时,使用’./’是很有用的。例如,如果你的应用部署在https://example.com/my-app/,那么资源(如脚本、样式表、图片等)的路径将会相对于 my-app/ 目录。
  3. 使用相对路径可以避免一些路径问题,特别是当你需要在本地打开HTML文件而不是通过服务器时。

base:'/':

  1. 这意味着你的项目将以根路径作为基础路径。
  2. 当你的项目部署在域的根目录时,使用 ‘ / ‘ 是合适的。例如,如果你的应用部署在 https://example.com/,那么资源将会从根目录加载。
  3. 如果你的项目部署在子目录中,但这里配置了 /,那么资源路径可能会出错,因为它们会相对于根目录而不是子目录。
  4. 因此,选择哪种路径取决于你的项目是如何部署的。如果你不确定项目将来会在哪里部署,或者如果你需要在本地和服务器上都可以正常工作,通常建议使用 base: './'。但是,如果你确定项目将始终部署在网站的根目录,那么使用 base: '/' 是安全的。记得根据实际部署情况调整这个配置。