如何配置Capacitor实现开发热重载且不影响生产构建

方法一：通过环境变量动态生成Capacitor配置 #

这种方式能让配置文件根据环境自动切换，无需手动注释代码：

1. 安装跨平台环境变量工具

npm install cross-env --save-dev

2. 修改package.json的脚本，添加区分环境的Capacitor命令

"scripts": {
  "dev": "vite --host 0.0.0.0",
  "build": "vite build",
  "cap:dev": "cross-env CAPACITOR_ENV=dev npx cap sync",
  "cap:build": "cross-env CAPACITOR_ENV=prod npx cap sync"
}

3. 修改capacitor.config.ts，根据环境变量动态配置服务器参数

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

// 判断当前是否为开发环境
const isDevelopment = process.env.CAPACITOR_ENV === 'dev';

const config: CapacitorConfig = {
  appId: 'com.example.my_app',
  appName: 'My App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    // 仅在开发环境添加热重载相关配置
    ...(isDevelopment && {
      url: 'http://192.168.x.xx:5173',
      cleartext: true
    })
  }
};

export default config;

使用方式：

• 开发时：先运行npm run dev启动本地服务，再执行npm run cap:dev同步配置到原生端，即可实现热重载
• 生产构建：运行npm run build打包前端代码，再执行npm run cap:build同步，此时不会包含url配置，直接使用本地打包后的dist文件

方法二：使用Capacitor命令行参数临时覆盖配置 #

无需修改配置文件，通过命令行参数指定开发环境的服务器地址：

• 开发时同步或运行原生项目，直接添加--server-url参数：

# iOS 开发运行
npx cap run ios --server-url=http://192.168.x.xx:5173

# Android 开发运行
npx cap run android --server-url=http://192.168.x.xx:5173

• 生产构建时直接执行常规同步命令即可，无需额外参数：

npm run build && npx cap sync

这种方式适合不想修改配置文件的场景，每次开发时临时指定服务器地址即可。

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