我已经在Heroku中部署了一个React + NodeJS应用程序,并且部署进行得很好,并且工作了几个小时。但是,删除缓存后,它现在拒绝加载页面。错误如下:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
和
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
第一个是MIME错误,它是指由Parcel构建生成的缩小文件。在index.html
文件dist
夹内的文件中调用该文件。这是调用它的行:
<link rel="stylesheet" href="/src.78399e21.css">
它的孪生.js
文件也称为index.html
:
<script src="/src.78399e21.js"></script>
问题1):我不知道如何做才能使CSS文件被接受。在其中,有一些从SCSS原始文件导入的与每个组件相关的注释。我想同时删除注释和将type
文件的添加为CSS,但没有成功。它应该是一个微妙的细节,但是我不知道还要尝试什么。
问题2:JS
Heroku找不到的文件位于的相同文件夹中index.html
。但是,该应用程序的路由已定义为以client
(Router basename="/client"
)作为根(https://flix-reloaded.herokuapp.com/client)。如果我使用client
(https://flix-reloaded.herokuapp.com/client/src.78399e21.css)手动键入URL,则会找到该文件,但是将文件路径更改为index.html
(您可以在下面看到)可以解决404问题,但又带来了另一个问题(例如,超出范围的系统js文件中意外出现了“ <”令牌)。
我尝试运行另一个Parcel构建,提交更改,清理缓存,但是没有任何效果。谁能为我提供帮助?如有必要,我将乐意提供更多详细信息。
index.html
文件dist
夹内(生产文件所在的位置)中的文件代码:
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
提前致谢
如果我使用客户端手动输入URL(https://flix-reloaded.herokuapp.com/client/src.78399e21.css),则会找到该文件,但会在index.html中更改该文件的路径(您可以请参见下文)解决了404问题,但又带来了另一个问题(例如,超出范围的系统js文件中意外出现了“ <”令牌是意外的)。
这是因为您需要对生产线进行相同的/client/
修复<script src="/src.78399e21.js"></script>
。
在这两种情况下,您的CSS / JS文件的URL都不正确,结果CSS / JS解析器正在尝试(但失败)将最终的404页面的HTML作为CSS / JS处理。
谢谢,@ ceejavoz,它起作用了。我已经手动将路径写入两个文件。CSS文件有效,问题仅在于路径。但是,我认为这只是暂时的解决方法,因为我需要找出为什么Parcel创建的构建会输出其中的缺陷路径
dist
。当我找到罪魁祸首时,我将更新此答案。但是无论如何都谢谢(您解决了)。