https://github.com/xie392/vite-react-capacitor-electron
一个样板支持构建多个平台:Android，iOS，macOS，Windows，Web，Linux。
https://github.com/xie392/vite-react-capacitor-electron
android capacitor elec ios linux mac react vite windows
Last synced: 5 months ago
JSON representation
一个样板支持构建多个平台:Android，iOS，macOS，Windows，Web，Linux。
- Host: GitHub
- URL: https://github.com/xie392/vite-react-capacitor-electron
- Owner: xie392
- Created: 2024-05-22T06:25:00.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-02T13:56:00.000Z (about 2 years ago)
- Last Synced: 2025-02-04T16:13:42.922Z (over 1 year ago)
- Topics: android, capacitor, elec, ios, linux, mac, react, vite, windows
- Language: TypeScript
- Homepage:
- Size: 547 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Capacitor + Electron
通过 `Capacitor` 构建 `Android` 和 `ios`, 并使用 `Electron` 构建桌面应用的模版。集成了 `i18n`。
# 运行前配置
## Android 端
- 安装 `Android Studio`
- 安装 `Java`
- 安装 `Gradle`
- 安装 `Android SDK`
- 配置 `ANDROID_HOME` 环境变量
## iOS 端
- 安装 `Xcode`
- 安装 `CocoaPods`
- 安装 `ios-deploy`
- 安装 `ios-sim`
- 安装 `ios-deploy`
- 配置 `PATH` 环境变量
## Electron 端
1、安装 `Node.js`
2、安装 `pnpm`
# 手机端开发热更新配置
> [官网教程地址](https://capacitorjs.com/docs/guides/live-reload)
1、本地已经配置好命令, 先运行：
```shell
pnpm run dev
```
2、运行成功后会有几个地址出来(一般需要第二个地址)：
```shell
➜ Local: http://localhost:5173/
➜ Network: http://192.....:5173/
➜ Network: http://...:5173/
```
3、然后在 `capacitor.config.json` 文件中配置 `server` 选项：
```ts
const config: CapacitorConfig = {
server: {
url: '把上面运行出来的地址填到这里，如： http://192.....:5173/',
cleartext: true
}
}
```
4、然后根据自己需要运行的平台跑下面其中一个命令：
```shell
# ios端
pnpm run dev:ios
# android端
pnpm run dev:android
```
5、如果是虚拟机运行，就点击运行，跑起来就可以看到热更新了。
6、如果是真机运行，确保在同一个局域网。