解决打包文件 加载资源报错 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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值