构建反应应用程序的版本，提供指向 CSS 和 JS 文件的错误链接

Posted 2023-02-22

【中文标题】构建反应应用程序的版本，提供指向 CSS 和 JS 文件的错误链接

【英文标题】：Build version of react app giving wrong links to CSS and JS files

【发布时间】：2021-11-11 01:59:24

【问题描述】：

我一直在做一个名为 Simple-portfolio 的简单 React 项目， Github 仓库：https://github.com/Devang47/simple-portfolio 直播网址：https://simple-portfolio.pages.dev/

此项目在开发服务器中运行良好，但在构建应用程序后，index.html 中指向其他文件的链接出错。例如：

// Wrong:
<link rel="icon" type="image/png" sizes="16x16" href="./simple-portfolio/favicon-16x16.png"/>

expected:
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/>

生产构建控制台上的错误：

The script from “https://simple-portfolio.pages.dev/simple-portfolio/static/js/3.f84cd7e8.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid javascript MIME type.

The script from “https://simple-portfolio.pages.dev/simple-portfolio/static/js/main.2f259d87.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

The stylesheet https://simple-portfolio.pages.dev/simple-portfolio/static/css/main.f6d0acc0.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”. 

Uncaught SyntaxError: expected expression, got '<'

Uncaught SyntaxError: expected expression, got '<'

到目前为止我所尝试的：

删除节点模块 删除锁定文件 全面搜索堆栈溢出以查找类似问题 在另一个分支上试试

【参考方案1】：

您的应用部署到域的根https://simple-portfolio.pages.dev/，但homepage 设置为具有不同路径的http://Devang47.github.io/simple-portfolio/。

要解决此问题，请从 package.json 中删除 homepage，重建您的应用，然后将其重新部署到 Cloudflare Pages。