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: 14 days 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 (7 months ago)
• Default Branch: master
• Last Pushed: 2024-06-02T13:56:00.000Z (7 months ago)
• Last Synced: 2024-10-28T08:11:02.841Z (about 2 months 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、如果是真机运行，确保在同一个局域网。