Preact+Parcel打包后路由失效问题求助

你碰到的这个问题其实很常见，核心原因是开发环境和本地打开打包文件的协议差异：

• 本地开发时，Parcel的dev server基于http://协议运行，preact-router默认使用HTML5 History API（pushState），这时候服务器会统一处理所有路由请求，不管访问哪个路径都会指向index.html，所以路由能正常切换页面。
• 但打包后直接双击index.html打开时，浏览器用的是file://协议——这个协议下浏览器不会处理单页应用的路由逻辑，点击<Link>时会直接把路径当成本地文件路径去查找，自然找不到对应文件，也就出现了你看到的file:///C:/{route_name}错误。

这里给你三个可行的解决办法，你可以根据需求选择：

1. 用本地HTTP服务器打开打包文件 #

这是最贴近开发环境的方式，能避开file协议的限制：

• 如果你已经安装了Parcel，直接用它的serve命令启动：

  parcel dist/index.html
  

  （dist是Parcel默认的打包输出目录，如果你修改过配置，换成对应的目录名即可）
• 或者用轻量的http-server工具，先全局安装：

  npm install -g http-server
  

  进入打包后的目录运行：

  http-server dist
  

  之后访问控制台给出的http地址（比如http://localhost:8080），路由就会和开发时一样正常工作。

2. 切换preact-router到Hash模式 #

如果就是想直接双击index.html打开页面，可以把路由改成Hash模式——这种模式下路由会带#前缀，file协议也能正常识别：
修改你的Router组件配置，添加hash属性：

<Router hash>
  <About default path='/about' />
  <Skills path='/skills' />
  <Books path='/books' />
</Router>

之后你的路由会变成/#/about、/#/skills这种形式，直接打开index.html点击标签就能正常切换页面了。

3. 线上部署时配置服务器Fallback规则 #

如果你之后要把代码部署到线上服务器，记得配置服务器的fallback规则：让所有路由请求都返回index.html，这样服务器才能正确处理单页应用的路由。比如：

• Nginx：在配置文件中添加try_files $uri $uri/ /index.html;
• Apache：在项目根目录创建.htaccess文件，写入FallbackResource /index.html
• Netlify/Vercel等平台：在项目根目录创建_redirects文件，内容为/* /index.html 200

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