如何让Gatsby构建的public文件夹可独立运行以部署至本地应用？

我明白你的困扰——用npm run develop在本地测试一切正常，但打包后的public文件夹里的index.html直接打开却看不到完整网站，想实现传统静态HTML/CSS站点那样双击就能运行的效果对吧？下面给你两种可行的解决方案：

方案一：配置相对路径前缀，让资源正确加载 #

Gatsby默认会把网站资源路径设为绝对路径（比如/static/css/main.xyz.css），当你用file://协议直接打开index.html时，浏览器会从本地磁盘的根目录去查找这些资源，而不是public文件夹，自然加载失败。我们可以通过配置让Gatsby生成相对路径的资源：

1. 打开项目根目录下的gatsby-config.js，在配置对象里添加pathPrefix字段：

   module.exports = {
     // 其他配置...
     pathPrefix: "./",
   }
   

2. 执行构建命令时，需要加上--prefix-paths参数来应用这个配置：

   gatsby build --prefix-paths
   

   如果你习惯用npm run build，可以修改package.json里的脚本：

   "scripts": {
     // 其他脚本...
     "build": "gatsby build --prefix-paths"
   }
   

3. 构建完成后，打开public文件夹里的index.html，就能正常加载所有资源了。

方案二：用本地静态服务器运行打包后的文件 #

如果你的站点用到了Gatsby的客户端路由（比如<Link>组件跳转页面），直接打开index.html可能还是会有路由跳转问题。这时候用本地静态服务器模拟线上环境是更稳妥的选择：

1. 全局安装serve工具（一个轻量的静态文件服务器）：

   npm install -g serve
   

2. 进入项目根目录，运行命令启动服务器：

   serve public
   

3. 打开浏览器访问http://localhost:3000（默认端口，可通过-p参数修改），就能看到和npm run develop一样正常运行的生产环境站点了。

为什么直接打开index.html不行？ #

简单来说，Gatsby默认假设你的站点部署在域名根目录（比如https://your-site.com/），所以用绝对路径引用资源是没问题的。但本地用file://协议打开时，绝对路径会指向本地磁盘根目录，而非public文件夹，导致资源找不到。配置相对路径或用本地服务器，都是为了让资源路径能被正确解析。

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