参考网址：
创建项目
创建命令
npm create vite@latest my-electron-vite-project
* Select a framework:
| Vanilla
| Vue
| React
| Preact
| Lit
| Svelte
| Solid
| Qwik
| Angular
| > Others
* Select a variant:
| Extra Vite Starters ↗
| > Electron ↗ (npm create electron-vite@latest)
? Project template: » - Use arrow-keys. Return to submit.
Vue
> React
Vanilla
Done. Now run:
cd my-electron-vite
npm install
npm run dev
注：在选项目模板时，可根据实际情况选择语言类型
安装依赖并运行
cd my-electron-vite
npm install
npm run dev
打包
命令
npm run build
问题
问题一：运行项目显示白屏 —— ERR_CONNECTION_REFUSED 版
运行完终端显示内容如下：
built in 161ms.
(node:74100) electron: Failed to load URL: http://localhost:5173/ with error: ERR_CONNECTION_REFUSED
(Use `electron --trace-warnings ...` to show where the warning was created)
解决方式：
在根目录下的 vite.config.ts 文件配置 server 相关配置信息，完整代码如下所示：
import { defineConfig } from 'vite';
import path from 'node:path';
import electron from 'vite-plugin-electron/simple';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
electron({
main: {
// Shortcut of `build.lib.entry`.
entry: 'electron/main.ts',
},
preload: {
// Shortcut of `build.rollupOptions.input`.
// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
input: path.join(__dirname, 'electron/preload.ts'),
},
// Ployfill the Electron and Node.js API for Renderer process.
// If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
// See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
renderer:
process.env.NODE_ENV === 'test'
? // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
undefined
: {},
}),
],
server: {
host: '0.0.0.0', // 主机名，设置为0.0.0.0可以允许外部访问
strictPort: true, // 端口被占用时，是否停止服务
open: true, // 启动服务时是否自动打开浏览器
},
});
问题二：初次打包出现“require” 声明但未运用/使用问题
打包时，终端报以下错误信息（“require” 声明但未运用/使用问题）：
> my-electron-vite-project@0.0.0 build
> tsc && vite build && electron-builder
electron/main.ts:6:7 - error TS6133: 'require' is declared but its value is never read.
6 const require = createRequire(import.meta.url)
~~~~~~~
Found 1 error in electron/main.ts:6
解决方式：
在 electron/main.ts中修改，如下：
import { app, BrowserWindow } from 'electron';
// import { createRequire } from 'node:module'; // 注释该代码
import { fileURLToPath } from 'node:url';
import path from 'node:path';
// const require = createRequire(import.meta.url) // 注释该代码
const __dirname = path.dirname(fileURLToPath(import.meta.url));
// 后续代码不变...
问题三：打包时，出现 Get "github.com/electron/el…" 下载失败问题
解决方式：
{
// 其余代码不变，增加以下代码，指定下载镜像源
"config": {
"electron_mirror": "https://npm.taobao.org/mirrors/electron/"
}
}
问题四：打包时，出现 winCodesign、nsis、nsis-resources 文件下载不了的错误
解决方式：
- winCodesign
- 可根据报错提示，依据下载链接，下载后解压并存放至
C:\Users\你的电脑用户名\AppData\Local\electron-builder\Cache\winCodeSign\ - 若下载的 winCodesign 命名不是
winCodeSign-版本号，需要在C:\Users\你的电脑用户名\AppData\Local\electron-builder\Cache\winCodeSign\下创建winCodeSign-版本号文件夹并将解压的内容放至该目录
- 可根据报错提示，依据下载链接，下载后解压并存放至
- nsis
- 可根据报错提示，依据下载链接，下载后解压并存放至
C:\Users\你的电脑用户名\AppData\Local\electron-builder\Cache\nsis\ - 若下载的 nsis 命名不是
nsis-版本号，需要在该目录下创建nsis-版本号文件夹并将解压的内容放至该目录 - 若下载的连接无法访问，可以访问 electron-builder-binaries Releases 页面找到 nsis 对应的版本，点击下载
- 可根据报错提示，依据下载链接，下载后解压并存放至
- nsis-resources
- 可根据报错提示，依据下载链接，下载后解压并存放至
C:\Users\你的电脑用户名\AppData\Local\electron-builder\Cache\nsis\ - 若下载的 nsis-resources 命名不是
nsis-resources-版本号，需要在该目录下创建nsis-resources-版本号文件夹并将解压的内容放至该目录
- 可根据报错提示，依据下载链接，下载后解压并存放至
