Github Pages部署后导入JS报404 本地parcel运行正常

本地开发环境Parcel默认以根路径/作为资源访问基准，而绝大多数Github Pages部署场景是项目子路径部署（即访问地址为https://<用户名>.github.io/<仓库名>/，而非根域名路径），打包后资源默认指向域名根目录，找不到对应文件就会触发404，和你写的ES模块导入语句本身没有直接关系。

• 第一步：修正构建时的公共路径配置
  打开项目的package.json，修改build命令，添加--public-url参数指定部署路径，两种配置方式二选一即可：
  1. 固定子路径配置：如果明确知道仓库名，直接填子路径即可，注意路径前后都要加斜杠，例如仓库名为my-parcel-demo：

     "scripts": {
       "dev": "parcel src/index.html",
       "build": "parcel build src/index.html --public-url /my-parcel-demo/"
     }
     

  2. 通用相对路径配置：不想硬编码仓库名的话直接传./作为公共路径，Parcel会打包成相对路径寻址，不管部署在什么子路径下都能正常加载资源，适配性更强：

     "scripts": {
       "dev": "parcel src/index.html",
       "build": "parcel build src/index.html --public-url ./"
     }
     

• 第二步：检查自定义导入路径写法
  你当前用的import animate from "./animate";属于相对路径写法，只要本地开发能正常加载，路径层级本身没有问题，注意不要把模块路径、静态资源路径写成根路径开头的形式（比如/js/animate.js），这类写法在子路径部署下会直接跳过仓库名前缀寻址，必然触发404。
• 第三步：确认部署产物正确
  执行npm run build后，打开生成的dist目录，检查入口html中引用的js、css资源路径：

  如果是配了固定子路径，资源路径应该是/<仓库名>/<打包后的文件名>.js格式；如果是配了相对路径，资源路径应该是不带开头斜杠的相对路径形式。
  部署到Github Pages时必须上传dist目录下的所有构建产物，不要直接把项目源码目录作为Pages部署源，否则服务器找不到编译后的资源文件也会报404。

• 第四步：校验Github Pages部署配置
  进入仓库的Settings-Pages页面，确认部署分支/部署目录指向的是你存放构建产物的位置：如果是手动部署，要确保分支根目录放的是dist内的文件；如果是用Actions自动部署，要确认工作流中上传的是dist目录内容作为Pages部署源。

改完配置重新执行build，本地可以随便起个静态服务跑dist目录内容验证，比如用npx serve dist，确认所有模块加载正常后再推送到Github部署即可。

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