# electron-react-vite

**Repository Path**: faithsinan/electron-react-vite

## Basic Information

- **Project Name**: electron-react-vite
- **Description**: Project template for electron + react + vite
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-04
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: template

## README

## 命名规范

### 文件夹
- 文件夹名全部使用小写，单词采用复数形式，kebab-case形式命名。

### 文件
- 文件是单文件组件/类/接口，采用 PascalCase 形式命名，便于导入使用和编译器区分自定义组件和 html 组件。
- 文件是目录下的主文件，采用 index 名称命名，方便导入。
- 其余文件全部使用小写，单词采用复数形式，kebab-case 形式命名。

### 代码命名
- 常量全部使用大写，采用 MAX_VALUE 形式命名
- 组件/类/接口，采用 PascalCase 形式命名。
- 变量/方法/函数，采用 camelCase 形式命名。


## 打包注意事项

### electron资源文件预下载和打包流程
node_modules 下面是我们开发时所用的依赖包，这些都不需要打包进去。因此我们需要指定我们打包时所需要打包的文件夹，此时就需要用到 package.json 里面 build 配置中的 files 属性，我们只需要将 build 目录下的文件和 main 下面的文件打包即可。

打包时还需要使用 electron 的相关包文件，为了提高打包速度，我们一般会提前下载与我们 node_modules **相同版本**的.zip包，然后打包时使用 electronDist 指定打包用的文件目录，可以缩减打包时间。


打包步骤：
1. 下载 electron 开发依赖相同版本和同打包平台的软件包放到 desktop/electron/ 下（包如：[electron-v37.4.0-linux-x64.zip](https://registry.npmmirror.com/binary.html?path=electron/)）
2. 在项目根目录执行 build 命令打包 react 模块代码;
3. 在 desktop/ 目录下执行 electron 的 build 命令打包 react 模块构建产物和 electron 模块代码；

可能报错：
如果 desktop/electron 下未下载 electron 的 zip 包文件或者包的版本和electron依赖包版本不一致，在打包时会报错：
~~~
⨯ ENOENT: no such file or directory, rename '' -> ''
~~~

### 打包产物预览问题

vite 使用module语法导入文件的，调用协议为file，打包后直接用浏览器打开会报CORS错误，详看 [链接](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSRequestNotHttp)。
需要通过 http 协议访问该文件，最简单的办法就是使用 vite preview 将打包产物载入到开发服务器预览。