Parcel多HTML入口打包后访问根路径出现404错误如何解决？

你遇到的404问题由两个常见原因导致：

1. 多入口构建后，你的静态托管服务没有配置默认索引页规则，访问根路径/时不会自动匹配返回index.html
2. 部分托管服务默认开启了干净URL规则，会自动去除资源后缀，导致无法直接匹配到.html后缀的入口文件

方案1：调整构建命令保证输出结构正确 #

首先确认你使用的Parcel版本：

• Parcel 1使用--out-dir指定输出目录，Parcel 2已将该参数替换为--dist-dir，用错参数会导致输出目录结构异常
  标准多入口构建命令如下：

parcel build index.html aboutme.html --dist-dir dist

构建后dist目录结构应为：

dist/
├── index.html
├── aboutme.html
└── 其他打包生成的css、js、图片等静态资源

方案2：配置静态托管服务的默认索引规则 #

绝大多数静态托管服务默认会将index.html设为根路径默认返回资源，如果你使用自定义Nginx托管，可在配置文件中增加以下规则：

location / {
  # 配置默认索引页
  index index.html;
  # 自动补全.html后缀，实现访问/aboutme直接加载aboutme.html
  try_files $uri $uri.html $uri/ =404;
}

如果你使用第三方托管平台，可在平台的路由配置项中开启默认索引页匹配、HTML后缀自动补全能力。

方案3：开发环境调整 #

如果你是在本地用Parcel自带的开发服务测试，不需要提前build，直接运行多入口启动命令即可：

parcel index.html aboutme.html

Parcel开发服务会自动将index.html作为根路径返回资源，不会出现404问题，--watch参数是Parcel 1的增量构建参数，Parcel 2的开发服务默认已开启热更新能力，不需要额外添加该参数。

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