Electron+Vue的环境配置

文章讲述了在使用Electron和Vue构建项目时遇到的两个主要问题:一是由于网络问题导致的electron-builder安装失败,通过修改npm源至淘宝镜像解决;二是Node.jsv17中OpenSSL3.0引起的错误,通过降级Node.js版本至v16.9或使用--openssl-legacy-provider参数解决。作者建议在搭建环境前考虑使用Node.jsv16.9。

1.第一个坑是网络问题,装electron的包装不上,提示网络问题,源换了无数次,tz开了关关了开仍然不行。最后找出了解决办法。
(165条消息) 使用原生vue搭建electron常见报错_barzar的博客-优快云博客
我遇到主要问题是
vue add electron-builder的时候他不能正常运行,提示网络错误,其大体的解决方案为npm config edit然后在这里面添加下面代码。

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

完美解决,以后装electron的包也很方便,归根结底还是换源其实。

2.然后装完后又遇到了第二个问题,运行的时候给我报错this[kHandle] = new _Hash(algorithm, xofLen);查询发现是node.js的新版本的问题,node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。
解决方法有两个一个降级另一个是在运行前加上SET NODE_OPTIONS=--openssl-legacy-provider其大致意思为运行的时候设置NODE_OPTIONS的路径,设置完后便可以运行了?吗?
并没有,弹出一个信息electron: --openssl-legacy-provider is not allowed in NODE_OPTIONS找了一圈后发现他们的答案是取消配置NODE_OPTIONS,额。
在微软的社区发现了一个已经解决的答案,彻底让我放弃折腾的心,他的解决方案是降级node.js,没办法降级,然后降级到node.js 16.9便好了。
大致就是遇到了这两个坑。如果看到这篇文章,我建议装electron+vue的环境前可以先考虑一下,或许…装个node.js 16.9?

新人第一次写文章,可以点个赞的话是极好的。

ElectronVue 3 结合起来可以创建跨平台桌面应用程序,而配置文件则是项目构建、运行的关键部分。下面将为你详细介绍如何设置 `electron` + `vue3` 的配置文件。 ### 一、初始化项目结构 首先需要通过命令行工具安装必要的依赖包: ```bash npm init -y # 初始化node.js项目 npm install vue@next vite @vitejs/plugin-vue electron --save-dev # 安装Vue3,Vite以及Electron等开发依赖项 ``` 接着组织项目的基本目录布局: - `/public`: 放置静态资源如图标; - `/src`: 包含源码的位置,比如main.ts(主进程)、App.vue(前端视图层)等等; ### 二、编写Vite配置(vite.config.ts) 对于基于 Vite 构建的应用程序来说,在根目录下添加名为 "vite.config.ts" 的 TypeScript 文件作为其配置入口点: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 8080 // 设置服务端口 } }) ``` 此段代码引入了官方提供的插件,并指定了本地服务器监听的端口号为8080,默认情况下会自动打开浏览器窗口访问该地址。 ### 三、编写 Electron 主进程(main.ts 或 main.js) 新建或修改位于 src 目录下的 main.ts (如果采用ts则用ts格式),它是整个应用的核心控制中心: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js')// 预加载脚本路径 } }) if (process.env.NODE_ENV === 'development'){ win.loadURL("http://localhost:8080") // 开发环境直接指向vite启动的服务 } else{ win.loadFile('./dist/index.html') // 生产环境下加载打包后的html页面 } } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 以上就是对 `electron` 加上 `vue3` 后所需的一些基础配置内容概述啦!
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jrenc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值