React配置homepage为相对路径后新标签页打开CSS加载失败如何解决

你判断的路径拼接错误是对的。homepage配置为./时，打包生成的资源引用都是相对当前页面URL路径的路径，当你新标签页打开路由为/sub-directory-path/somepage的页面时，相对路径./static/css/xxx.chunk.css会被浏览器拼接为/sub-directory-path/somepage/static/css/xxx.chunk.css，而你的静态资源实际存放在/sub-directory-path/static/路径下，服务端找不到资源就会返回404页面（HTML格式），所以才会触发MIME类型不匹配的报错。

该问题和新标签页跳转本身无关，是相对路径资源引用规则和前端路由路径变化产生了冲突，参考以下方案修复即可：

方案1：固定homepage为绝对子路径（首选） #

如果你的应用固定部署在指定子目录下，直接把package.json中的homepage配置修改为子目录的绝对路径即可：

"homepage": "/<sub-directory-path>/"

该配置会让所有静态资源的引用路径统一从根域名下的子目录加载，不受当前页面路由影响，新标签页打开任意路由都不会出现资源加载错误。

方案2：保留相对路径配置，补充base标签 #

如果你的应用部署路径不固定，需要保留相对路径配置，只需在public/index.html的<head>标签中添加base标签：

<base href="%PUBLIC_URL%/" />

%PUBLIC_URL%会在打包时自动替换为package.json中配置的homepage值，添加该标签后，页面内所有相对路径的资源引用都会以base标签的href为基准拼接，不会再带上当前路由的路径后缀。

同时如果使用react-router做路由管理，需要给路由组件加上basename配置，保证路由跳转路径正确：

// react-router v6 示例
import { BrowserRouter } from 'react-router-dom'

<BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* 路由配置 */}
</BrowserRouter>

方案3：改用HashRouter #

如果不想修改现有配置，也可以将路由模式从BrowserRouter改为HashRouter：

import { HashRouter } from 'react-router-dom'

<HashRouter>
  {/* 路由配置 */}
</HashRouter>

HashRouter的路由路径会放在URL的hash段（即#之后），浏览器解析相对路径时只会取#之前的路径作为基准，自然不会出现路径拼接错误，缺点是URL会带#标识，美观度略低。

内容的提问来源于stack exchange，提问作者amol