create-react-app项目public目录下js文件运行及打包后无法访问如何解决

第一步：校验基础文件与路径配置 #

• 确认handy.min.js直接放置在public根目录，未嵌套在子文件夹中。如果存放在子目录（比如public/js/），引入路径需要对应修改为%PUBLIC_URL%/js/handy.min.js
• 检查public/index.html内的script标签写法是否正确，标准写法为：

  <script src="%PUBLIC_URL%/handy.min.js"></script>
  

  注意不要遗漏%PUBLIC_URL%两侧的百分号，也不要多加多余的斜杠前缀
• 确认文件名大小写完全匹配，Windows开发环境对大小写不敏感，但打包后部署到Linux服务器会严格区分大小写，拼写错误会导致线上404

第二步：验证本地开发环境可用性 #

启动本地开发服务后，直接在浏览器地址栏访问http://localhost:3000/handy.min.js（默认端口是3000，如果你改了端口对应调整即可），如果无法直接访问到文件内容，检查是否修改过create-react-app默认的静态资源目录名称，默认只能识别public作为静态资源根目录，修改名称后会丢失静态资源映射。

第三步：确保打包后正常可用的配置 #

create-react-app默认会将public目录下的所有文件原封不动复制到build输出目录，不需要额外修改webpack配置，只要按以下规则调整即可：

• 如果你的项目部署在域名根路径下，不需要额外配置，直接执行npm run build后，%PUBLIC_URL%会被自动替换为空字符串，生成的路径为/handy.min.js，可正常加载
• 如果你的项目部署在域名子路径下（比如https://example.com/my-app/），需要在package.json中添加配置项：

  "homepage": "https://example.com/my-app/"
  

  或者配置为相对路径"homepage": "."，打包后%PUBLIC_URL%会自动替换为对应的子路径前缀，保证资源路径正确
• 打包完成后可以直接打开build目录校验：确认build根目录下存在handy.min.js，同时build/index.html内的script标签src已经替换为正确的路径

备选方案 #

如果不想处理public路径问题，可以将handy.min.js移动到src目录下（比如src/utils/路径），在项目入口文件src/index.js顶部添加引入代码：

import './utils/handy.min.js'

这种方式会将该js文件打包到最终的bundle文件中，不需要额外处理静态资源路径，打包后可直接正常使用。

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