React执行npm run build后打开index.html报样式MIME类型错误无内容如何解决

问题根因 #

create-react-app默认配置打包后，所有静态资源（css、js、图片等）的引用路径都是绝对路径，直接通过file://协议打开本地build/index.html时，浏览器会从本地磁盘根目录查找对应资源，找不到就会返回404页面（MIME类型为text/html），因此触发样式加载MIME类型不匹配的报错，同时JS资源也加载失败导致React组件没有渲染到#root节点。

解决方法 #

方法1：使用静态文件服务访问（推荐，适配生产部署逻辑） #

• 全局安装静态服务工具serve：

npm install -g serve

• 打包完成后执行命令启动服务指向build目录：

serve -s build

• 启动成功后按照终端提示访问对应本地地址（通常是http://localhost:3000）即可正常访问页面。

方法2：修改配置适配本地直接打开的场景 #

如果需要直接双击打开index.html就能访问，修改项目根目录的package.json配置，新增homepage字段设为相对路径：

{
  ...
  "homepage": ".",
  "scripts": {
    ...
    "build": "react-scripts build"
  }
}

修改完成后重新执行npm run build打包，再直接打开新生成的build/index.html就能正常渲染内容。

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