React 项目打包——dist 目录直接丢进 PakePlus

流程

和 Vue 完全一样：构建 → 拿 dist/build 目录 → 在 PakePlus 里选这个目录 → 打包。不需要改 React 代码。

不同构建工具的输出目录

React 项目可能用不同的构建工具，输出目录名称略有差异：

关键：PakePlus 需要的是"静态资源目录"——里面有 index.html，所有 JS/CSS/图片都能通过相对路径访问。

Create React App (CRA) 的注意点

publicPath / homepage

CRA 默认打包成 / 根路径的绝对引用。如果直接丢进 PakePlus 的 WebView 会找不到资源。

解决方案：在 package.json 里加 homepage

{
  "homepage": "./"
}

homepage 设为 "./" 后，CRA 会把所有资源引用改成相对路径。重新 npm run build 后 dist 目录就能被 PakePlus 正确加载了。

BrowserRouter → HashRouter

React Router 如果用了 BrowserRouter（HTML5 History 模式），PakePlus 里刷新会白屏。改成 HashRouter：

// Before
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>...</BrowserRouter>

// After
import { HashRouter } from 'react-router-dom';
<HashRouter>...</HashRouter>

Vite + React 模板

和 Vite + Vue 一样的解决方案：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: './',  // 关键：相对路径
});

Next.js（需要静态导出）

Next.js 默认的 next build 输出是 Node.js 服务器渲染的产物，不是纯静态。需要加静态导出：

// next.config.js
module.exports = {
  output: 'export',
  basePath: './',    // Next.js 13+ 用这个
  assetPrefix: './',  // Next.js 13 以下用 assetPrefix
  images: {
    unoptimized: true,  // 静态导出不能用 Next.js Image Optimization
  },
};

然后 next build，产物在 out/ 目录。把这个目录丢进 PakePlus。

注意：Next.js 的 API Routes、Server Components、getServerSideProps 在纯静态导出后都不能用——只有 getStaticProps / getStaticPaths 能生成预渲染的静态页面。

Gatsby

Gatsby 本身就是静态站点生成器，gatsby build 后产物在 public/ 目录。直接丢进 PakePlus：

gatsby build
# public/ 目录就是 PakePlus 需要的

不需要额外改配置（Gatsby 默认用相对路径）。

Remix

Remix 需要用静态导出 adapter（如 @remix-run/vercel 或第三方 adapter），把 build 后的 build/client/ 目录丢进 PakePlus。但 Remix 的核心能力是服务器端渲染 + 数据加载，纯静态导出后能力受限较大——不如用 Gatsby 或 Next.js SSG。

React 项目常见坑

绝对路径资源引用

表现：PakePlus 里打开后白屏，F12 Console 里看到 "Failed to load resource" 错误。

原因：打包时资源路径写成了 /static/js/main.js（绝对路径），WebView 里找不到。

解决：按上面各构建工具的说明改成相对路径 ./。

BrowserRouter 刷新白屏

表现：React SPA 在 PakePlus 里能正常导航（点击链接切换页面），但一按刷新就白屏。

原因：WebView 尝试直接访问 /dashboard，找不到这个路径下的 index.html。

解决：改成 HashRouter。

document.title 和 favicon

这些由 dist 里的 index.html 决定，PakePlus 直接用——不需要额外配置。但 APP 的桌面图标（任务栏、安装包图标）由 PakePlus 的配置页面里的"软件图标"字段控制，和 React 项目里的 favicon 是两回事。

和 Vue 的对比

两者的流程完全一致，只是具体配置项名字不同。