Vue 项目打包——构建 dist 目录，丢进 PakePlus 即成桌面 APP

流程概览

Vue 项目源码 → npm run build → dist 目录 → PakePlus 选 dist 目录作为来源 → 出桌面 APP

PakePlus 对 Vue 项目是零侵入的——不需要修改源码，不需要添加额外的 plugin，只要能构建出标准 dist 目录就行。

前置条件

步骤一：构建项目

Vue 3 + Vite（最常见）

npm run build

输出目录默认是 dist/（Vite 默认配置）。如果改了 build.outDir，就用你改的那个目录。

Vue 2 + Webpack（传统）

npm run build

输出目录默认是 dist/ 或 build/（看你的 vue.config.js 里的 outputDir）。

确认构建成功

构建完成后，dist/ 目录里应该有：

dist/
├── index.html              ← 必须有
├── assets/                 ← 构建出来的 JS/CSS/图片
│   ├── index-xxx.js
│   ├── index-xxx.css
│   └── ...
└── favicon.ico             ← 可选

关键检查点：

• ✅ 有 index.html 入口文件
• ✅ index.html 里的资源引用路径是相对路径（<script src="./assets/index-xxx.js"> 或 <base href="./">）
• ❌ 如果资源路径是绝对路径（/assets/index-xxx.js），PakePlus 可能找不到资源

步骤二：在 PakePlus 里选 dist 目录

1. 打开 PakePlus → 创建项目
2. 在软件配置页面的"网站地址"字段，不要填 URL——选 dist 目录
3. PakePlus 应该有一个"选择本地文件夹"的按钮或文件选择器
4. 选中构建好的 dist/ 目录

步骤三：预览 + 打包

1. 点"预览"按钮 → 确认 Vue 应用能在预览窗口里正常运行
2. 检查：路由是否正常、样式是否正确、JS 是否报错
3. 没问题 → 点"发布" → 选云端或本地打包

常见坑与解决

坑一：Vue Router history 模式白屏

如果 Vue 项目用的是 createWebHistory()（HTML5 History 模式），在 PakePlus 里直接打开 index.html 会导致刷新 404 或白屏。

解决方法：

// 改成 hash 模式
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
});

hash 模式（URL 里有 #）不需要服务器重写规则，本地 HTML 文件可以直接运行。

坑二：资源路径绝对引用

index.html 里的资源引用写成了 /assets/index.js（绝对路径），PakePlus 本地 WebView 会找不到文件。

Vite 解决方案：

// vite.config.js
export default defineConfig({
  base: './',  // 用相对路径
});

Vue CLI 解决方案：

// vue.config.js
module.exports = {
  publicPath: './',
};

坑三：API 请求跨域

如果 Vue 项目里发 fetch 请求到某个 API 服务器，在 PakePlus 的 WebView 里会遇到 CORS 限制（和浏览器一样）。

解决方案：

• 开 PakePlus 配置里的"TauriApi"开关
• 用 @tauri-apps/plugin-http 发请求，绕过浏览器 CORS（详见 系统级 API 调用）

坑四：localStorage / Cookie 被隔离

PakePlus 桌面端的 WebView 有自己的存储域——如果你原本是部署在某个域名下的 Vue 项目，打包后 localStorage 里的数据不会和原网站共享。这是预期行为。

坑五：构建产物太大

Vue 项目构建后 dist 目录可能有几十甚至上百 MB（如果引入了大体积依赖如 echarts、three.js）。

云端打包注意：GitHub 仓库单文件上限 100MB。如果某个单独的资源文件（视频、字体）超过 100MB，云端打包会失败。

解决：大资源文件用外部 CDN 链接，不要打包进 dist。

一个完整例子

假设你有一个 Vue 3 项目：

# 1. 进入项目目录
cd my-vue-app

# 2. 构建
npm run build

# 3. 构建好的 dist 在 ./dist/
# 4. 打开 PakePlus → 新建项目 → 在"网站地址"选 ./dist/ 目录
# 5. 预览 → 打包

整个过程不需要安装任何额外工具链（Rust、Tauri、WebKitGTK 全在 PakePlus 内置或 GitHub Actions 里）。