Capacitor 打包后白屏，本地调试却正常？

西门柯汝提问于 2026-03-09 03:36:23 阅读 10

框架

我用 Capacitor + Vue3 开发了一个 App，本地运行 npm run dev 一切正常，但执行 cap build android 后安装到手机就一直白屏。

试过检查网络权限、确认服务器地址用了 HTTPS，也清过缓存重装，还是不行。控制台没报错，真机调试也看不到任何日志输出，完全不知道从哪下手了……

我的 capacitor.config.ts 是这样配的：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

我来解答赞 7 收藏

反馈

1 条解答

宇文莉娜 Lv1

白屏问题在Capacitor里太常见了，特别是本地正常打包出问题的情况。我遇到过好几次，给你几个排查方向：

1. 先检查打包后的dist目录是不是完整。有时候构建命令没执行完或者缓存导致文件缺失。建议手动删除dist文件夹重新npm run build再打包。

2. 重点看路由配置。Vue的history模式在移动端容易出问题，建议改成hash模式试试：

const router = createRouter({

  history: createWebHashHistory(),

  routes

})

3. 检查静态资源路径。Capacitor打包后路径会变，建议在vite.config里加base配置：

export default defineConfig({

  base: './',

  // 其他配置...

})

4. 真机调试看不到日志就加个alert。在main.js入口处加个alert('app loaded')，至少能知道js有没有执行到。

5. 最后实在不行就上终极方案：在capacitor.config.ts里加个server.url指向本地开发服务器，这样打包后还是会请求本地地址方便调试。

我上次遇到类似问题是静态资源路径导致的，折腾了一下午才发现。Capacitor这玩意儿打包时的路径处理有时候真的很迷...

2026-03-09 04:02