vue.js 拒绝应用“”中的样式,因为其MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格MIME检查

gopyfrb3  于 2022-11-25  发布在  Vue.js
关注(0)|答案(9)|浏览(1511)

我有一个Vue.js项目,当我检查控制台时发现这个问题如下:
拒绝套用'http://localhost:8080/dist/cropper.min.css'的样式,因为其MIME类型('text/html')不是支援的样式表MIME类型,而且已启用严格MIME检查。

我搜索了SO,发现了一个Angular related post,但它对我没有帮助,它们基于不同的前端框架。

7xzttuei

7xzttuei1#

出现此错误消息的原因通常是当浏览器尝试加载该资源时,服务器返回的是HTML页面,例如,如果路由器捕获到未知路径并显示默认页面而没有404错误。当然,这意味着该路径没有返回预期的CSS文件/ image / icon / whatever。
要确定您是在这种情况下,请复制路径并尝试在新的浏览器窗口或选项卡中直接访问它。您将看到服务器发送的内容。
解决方案是找到正确的路径和路由器配置,以便在访问该路径时获得纯CSS文件/ image /etc。
确切的路径和路由器配置取决于您设置项目的方式和所使用的框架。

s8vozzvw

s8vozzvw2#

你提供的信息不充分。但我也有同样的问题,所以我有一个解决办法。
假设你在一个组件的样式块中@import css文件。所以我的问题是在我指定的路径中。错误消息Refused to apply style出现了,因为路径错误。我以为我的src路径别名~在样式块中被解析,但它没有。
我所要做的就是指定/src/assets/css...而不是~/assets/css...

6rqinv9w

6rqinv9w3#

我遇到了完全相同的问题“拒绝应用”http://localhost:8080/css/formatting.css“中的样式,因为它的MIME类型(”application/json“)不是支持的样式表MIME类型...”
我浏览了窗口资源管理器,并纠正了文件路径(文件夹),因为我打算。也有拼写错误的地址一样,路径是如上所述(formatting.css或双't'),但文件实际上是formatting.css(单't')和问题解决。有些解决方案是不昂贵的。谢谢。

r6hnlfcb

r6hnlfcb4#

你必须改变你的文件css的位置到目录assets assets/style.css
然后将这些路径放入文件index.html src/index.html中

<link rel="stylesheet" type="text/css" href="assets/style.css" />

此外,您必须修改文件angular.json的样式

"styles": [
              "src/assets/style.css",
              "./node_modules/materialize-css/dist/css/materialize.min.css",
            ],
xqkwcwgp

xqkwcwgp5#

当您在package.json中设置了不正确的BUILD目录时,也可能会发生这种情况。例如

// Somewhere in index.js
// Client Build directory for the Server
app.use(express.static(path.resolve(__dirname, '../this-client/**build**')));

然后打包。json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "build-package-css": "cp src/assets/css/my-this-react.css **build**/my-this-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir **build**"
  },

我标记为粗体的目录应该是相同的。如果有差异,那么它不会运行。

kknvjkwl

kknvjkwl6#

我在生产中运行我的应用时遇到了同样的错误。使用npm run serve时一切正常,但npm run build的结果导致了同样的错误。原来我在历史模式下使用vue路由器,我的nginx服务器没有正确配置。
我将vue路由器更改为散列模式,并停止收到该错误消息。尝试使用散列模式,看看该消息是否消失。如果消失,则需要调整您的Web服务器设置。

oknwwptz

oknwwptz7#

我的React项目也遇到了同样的问题,我找到的解决方案是在webpack.config.js的输出中添加一个“publicPath”。

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
},
tp5buhyn

tp5buhyn8#

我遇到了这个问题..我正在将一些scss文件集成到我的项目中,只是假设我应该使用
rel="stylesheet"
<link href="/epic.scss" rel="stylesheet" type="text/css">
一旦我删除了属性,就没有更多的样式表问题了...
工作.scss文件

<link href="/epic.scss" type="text/css">
yv5phkfx

yv5phkfx9#

在我的例子中,我只是把链接标记从<link href="Content/charity/bootstrap-icons.css" rel="stylesheet">改成了<link href="~/Content/charity/bootstrap-icons.css" rel="stylesheet">,它就起作用了。只需添加~

相关问题