electron vue vite 配置安装

本文提供了解决Electron应用打包时遇到的各种下载失败问题的方法,包括手动下载并配置依赖文件到本地缓存中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:第一次安装,无脑npm install后来发现,跑不了
1、根目录新建.npmrc文件、内容如下

electron_mirror=http://cdn.npm.taobao.org/dist/electron/

2、在打包过程中,各种安装不顺利

打包时下载electron-v.xxxx.zip文件失败
解决办法:直接在淘宝的文件库下载对应版本和打包平台的文件,下载完成后放在C:\Users\Administrator\AppData\Local\electron\Cache这个目录下

打包时下载winCodeSign-v.xxx.7z文件失败
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z

下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign目录下

打包时下载nsis-v.xxx.7z文件失败
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

打包时下载nsis-resources-v.xxx.7z文件失败
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
下载完解压放到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

### Electron Vue Vite 项目搭建与配置教程 #### 创建新项目 为了创建一个新的基于 ElectronVueVite 的应用程序,可以按照如下方法操作: 通过终端执行命令来初始化新的Vite项目。这会设置好基础结构并准备好用于前端开发的环境[^3]。 ```bash npm init vite@latest my-electron-app --template vue cd my-electron-app ``` #### 安装依赖项 进入刚刚创建好的目录之后,安装必要的包以支持Electron框架的功能。这里需要特别注意的是`electron-vite`应该被指定为开发阶段使用的依赖项之一[^2]。 ```bash npm install electron-vite --save-dev npm install ``` #### 配置主进程文件(main-process) 通常情况下,开发者会在项目的根目录下找到名为 `main.ts` 或者 `main.js` 的入口脚本。此文件负责启动Electron应用实例以及加载渲染页面所需的资源。对于采用TypeScript的情况,则推荐使用`.ts`扩展名;而对于JavaScript则保持默认即可[^1]。 ```javascript // main.js or main.ts depending on your setup const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true } }) win.loadURL(process.env.VITE_DEV_SERVER_URL || url.format({ pathname: path.join(__dirname, '../dist/index.html'), protocol: 'file:', slashes: true })) } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` #### 启动开发服务器 完成上述步骤后,可以通过运行特定于平台的任务来进行本地测试。一般而言,这些任务会被定义在package.json中的scripts部分,并可通过简单的CLI指令触发。 ```json { "scripts": { "dev": "vite", "build": "vite build" } } ``` 最后,在命令行输入以下内容开启服务端口监听以便实时预览效果变化: ```bash npm run dev ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值