如何在离线模式下正常运行本地部署的Remix-project

离线启动黑屏的核心原因是项目默认配置依赖大量公网CDN静态资源，离线环境下这类资源加载失败直接中断前端渲染，联网状态下资源可正常拉取因此运行无异常，可按以下方案逐一排查解决：

方案1：使用官方离线构建命令 #

• 保持网络连通状态，在项目根目录执行npm run build:offline，该命令会自动将运行所需的solc编译器wasm文件、编辑器资源、web3依赖、字体文件全部打入本地构建产物，无需手动替换资源
• 构建完成后进入dist/apps/remix-ide目录，通过本地静态服务启动产物即可，推荐使用npx http-server -c-1命令启动，-c-1参数用于禁用静态资源缓存，避免旧缓存干扰
• 构建全程需保持联网，确保所有资源被正确打包，构建完成后即可断网访问验证

方案2：手动替换所有外部CDN引用 #

• 联网状态下启动项目，打开浏览器开发者工具的Network面板，筛选JS、CSS、字体、WASM类资源，标记所有请求源不是本地服务的外部资源
• 将标记的外部资源全部下载到项目本地静态资源目录（通常为public或apps/remix-ide/src/assets路径，随项目版本略有差异）
• 全局检索项目源码，将所有硬编码的CDN地址替换为对应本地资源的相对路径
• 替换完成后重新执行构建，断网启动后查看控制台报错，逐个补全漏替换的资源即可

方案3：调整构建配置将依赖全量打入本地包 #

• 找到项目根目录下的webpack构建配置文件，检查externals配置项，将所有声明为外部依赖、不参与本地打包的模块从该配置中移除，确保npm安装的依赖会被打入构建bundle
• 检查入口index.html文件，删除所有带远程地址前缀的script、link标签，改为在业务代码中通过import方式引入本地已安装的对应依赖
• 执行全量构建命令，检查构建产物中是否存在远程域名的资源引用，确认无外部引用后再启动本地服务

方案4：清理缓存干扰 #

• 断网启动前清空浏览器下本地域名对应的所有缓存、Service Worker缓存，联网状态下残留的缓存路径和离线资源路径不匹配也会导致渲染黑屏
• 启动本地服务时添加禁用缓存参数，避免静态资源304缓存返回异常内容导致加载失败

排查时可直接在离线状态下打开浏览器控制台，所有网络断开类报错对应的资源就是未完成本地化的资源，逐个处理即可。

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