解决打包文件 加载资源报错 because its MIME type (‘text/html‘) is not a supported stylesheet MIME type

关于vue-cli打包文件出现问题加载问题

出现这种问题,大多都是路径问题

事情是这样的,最近打包的文件放在服务器上,一直报错,发现资源加载问题,于是上网查找全是关于相对路径的设置问题.但是,修改路径后,基础资源加载没有问题了,但是路由下的页面依然报错,并且是这样的报错.

意思很简单: 拒绝从‘ …’加载应用样式，因为它的MIME类型(‘text/html’)不是受支持的样式表MIME类型

不仅仅css,包括js也出现了相同的问题

后来发现居然跟路由模式也相关,其他项目中默认路由模式是hash,而当前的路由模式是 history模式，就出现了错误

如果大家都尝试了相对路径,而未能解决问题,可以尝试像我这样修改路由模式

在src/router/index.js

// An highlighted block
new Router ({
  mode: 'hash',
  routes: ...,
})

此后webpack打包设置中（一般在vue.config.js）使用相对路径。

不同的脚手架版本,不同的写法 3.0在config文件夹下去修改 比如assetsPublicPath

// vue-cli 4.0
module.exports = {
    publicPath : './'
}

现在可以正常加载了.但是问题并没有解决,为什么hash模式可以,而history模式就会出问题呢.带着疑问,我再次去尝试history模式的写法

当我加上文件夹路径后,此时依然成功了,可以正常加载了

module.exports = {
    publicPath : '/dist/'  //文件夹的路径名称要对应于服务器端 例如是 myProject 也要相应//myProject
}

总结

• hash

hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中 会有 “#” 号

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 例如:http://localhost:8080/#/login

• history

history模式： 美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api

由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404 例如: http://localhost:8080/login

• 这个只是个人部分总结,目前记录下解决办法和原因.但是关于更深层次的原因可以参考以下这篇,大哥描述的原理部分
  https://blog.csdn.net/weixin_58515303/article/details/121043444