如何在一个vue项目中集成electron框架

已于 2023-05-29 16:09:50 修改
阅读量980 收藏 4
点赞数 3
文章标签： vue.js electron javascript
于 2023-05-29 15:40:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yw2026/article/details/130929255
版权

将electron框架集成到vue文件中，不改变vue文件的原有结构

 1、在vue文件中安装electron框架，运行代码

vue add electron-builder

nde为v16的，electron版本一般选择 "electron": "^13.0.0",

2、启动项目

npm run electron:serve

这样就能在网页中打开咱们的vue项目

3、构建桌面应用程序

npm run electron:build

4、打开你的文件中的package文件，查看启动方式

 运行代码：

npm run electron：serve

这个过程耗时会比较久，耐心等待，首次加载时会先出现一个网页，然后在构建桌面程序

5、桌面程序构建完成

音柒smile
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2+elementui+electron项目配置
06-06
vue2+elementui+electron项目配置
vuecli+electron安装教程，日nm，巨坑！！！！
qq_38814363的博客
01-31 494
然后再执行 vue add electron-builder。安装electron-chromedriver。修改nrm的配置文件，添加其他依赖包的镜像源。安装nrm，用nrm来切换淘宝镜像源。安装electron-builder。脚手架安装，我这里使用的是vue2。如果有时区问题或者ssl。
vue+electron搭建及打包、打印功能
weixin_46262596的博客
03-20 465
tip：在vue.config.js文件内配置以下代码，解决electron+vue环境运行下出现__dirname is not defined报错解决方法。4、全局安装后你可以发现background.js文件，electron主进程的代码放在此文件内，渲染进程就交给vue。二、1、可使用 Vue CLI 来添加 Vue.js 到你的 Electron 项目中。先记录到这里，后续遇到问题继续记录！主进程 background.js文件。修改vue.config.js文件。在主进程文件中添加以下代码。
vue2使用electron以及打包配置
m0_63701303的博客
01-15 1293
vue2使用electron以及打包配置
vue2 + electron 用超简单方法搭建前端桌面应用
qq_45599738的博客
11-10 599
vue2 + electron 非常简单的搭建方法
vue项目electron打包
矩阵的乘法
11-09 297
命令行输入后会弹出npm的配置文档，需要文档末尾加入。本电脑之前安装过，因此我把之前的删除了，从新安装的。如果vue add命令不好使，需要配置。更改ts-loader版本，就好使了。在打包的时候遇到一个问题。
从零搭建vue+electron桌面应用
csdn_chengpeng的博客
07-18 2137
以报错代码为例，手动下载：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z。然后将其复制到下图的目录中（你的目录地址不一定和我的一样，需要根据找到自己的目录地址）这是因为网络的原因导致的，遇到这种情况只能手动下载对应的包，然后粘贴到对应的目录。引入ipcRenderer。监听主进程发送过来的消息。
vue3集成electron
I_xuebi的博客
05-17 5110
vue3 vue 集成 electron 白屏 打包
向vue中集成electron（使用electron-builder插件直接将electron集成到自己的项目）
qq_45787691的博客
09-01 5016
使用 vue add electron-builder将electron直接集成到vue项目中。
使用vue-cli-plugin-electron-builder创建electron+vue项目
三巧的博客
12-28 5771
使用vue-cli-plugin-electron-builder创建electron+vue项目
vue安装electron事项
晨曦的博客
11-11 867
(node -v / npm -v),但要注意这里node版本需要尽可能对应,我把我找的对应版本的表提供出来了,会放在文末.如果提示npm版本过低,就升级npm(cnpm install npm@latest -g)4.然后输入yarn install electron --save-dev,可能比较慢,也可能会连接不上,这时我们就可以选中镜像文件到下载:对单独electron包做镜像,具体教程我会放在文末。1.确认安装node.js,(这个自行安装,网上自己找)我使用的是这个命令,可以看到下载进度。
详解如何在vue项目中使用layui框架及采坑
10-17
主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue项目中集成graphql(vue-ApolloClient)
01-19
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的，可使用SDL(GraphQL Schema...
electron + vue 项目运行打包配置文档
01-08
vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码： ...3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de
vue-cli + electron打包项目成客户端
mostrichman的博客
04-27 675
4.如果想要更改客户端图标和应用名称等信息的话，可以在vue.config.js中配置,以下是部分配置参数。5.接下来就可以使用 npm run electron:build 进行打包了。*这里需要注意的是，图标的尺寸一定要是 256*256 的，否则会报上面的错。以上就是vue-cli + electron打包项目成客户端的全部过程。3.执行npm run electron:serve查看效果。修改完图标尺寸重新执行打包命令，打包成功后的文件夹是这样的。2.添加electron-builder。
Electron + Vue3 开发桌面应用
热门推荐
Hyung的博客
01-04 1万+
Electron + Vue3 开发桌面应用
vite+ vue3项目添加electron，并electron打包教程，以及electron代码热重载页面
L_15737525552的博客
07-23 3157
4.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了，因为监听的是8888端口，所以我们需要去更改vue的运行端口，在根目录vite.config.js中加入以下代码。现在启动程序npm run electrone:dev会得到一片空白，展示如下页面，因为现在监听的是vue打包后的dist文件夹中的index.html。只在开发环境中使用，并且不会在生产环境中被打包到应用程序中。应该只在开发环境中使用，而不是在生产环境中使用。3.在package.json中新增打包命令。
如何将一个vue项目集成到electron框架中
Yw2026的博客
05-29 1508
5、 打开我们的electron文件，找到其中的frontend文件，将我们的压缩包移动到electron文件中，并改名为frontend，解压缩，替换掉frontend文件，如下图。1、electron是一个桌面应用程序的框架，可以将vue项目集成为一个桌面应用程序。压缩的目的是为了更好的将项目文件复制到我们的electron框架中。这样我们的frontend文件中就装着我们的vue项目文件了。6、打开electron文件，运行代码。7、这样就可以运行我们的桌面程序了。3、下载后将你需要集成的项目打包。
Vue项目集成Electron打包为exe
最新发布
weixin_48469176的博客
04-18 370
Vue项目集成Electron打包为exe
搭建一个electron项目，要求vue3
03-25
A：要搭建一个用Vue3框架的Electron项目，可以按照以下步骤进行： 1. 安装Electron和Vue CLI 需要全局安装Electron和Vue CLI，可以使用以下命令进行安装： ``` npm install -g electron npm install -g @vue/cli ``` 2. 创建Vue3项目 使用Vue CLI创建一个新的项目，可以通过以下命令创建： ``` vue create my-electron-project ``` 在创建时选择默认的配置和Babel编译器。 3. 集成Electron 在项目根目录下新建一个`main.js`文件，并在其中引入Electron： ``` const { app, BrowserWindow } = require('electron') function createWindow () { // 创建窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载Vue应用 win.loadURL('http://localhost:8080/') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这个文件主要用于创建一个Electron窗口，同时在窗口中加载Vue应用。 4. 修改Vue配置 在Vue项目中，需要安装一些插件来支持Electron，同时需要进行一些配置。在`package.json`文件中添加以下内容： ``` { "main": "main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build && electron .", "electron:serve": "vue-cli-service build && electron . --serve", "electron:build": "vue-cli-service build && electron-builder" }, "dependencies": { "electron": "^13.1.2" }, "devDependencies": { "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.3" }, "electronBuilder": { "builderOptions": { "appId": "com.example.myapp", "productName": "My App", "win": { "target": "nsis" } } } } ``` 其中`dependencies`添加了`electron`，`devDependencies`添加了`electron-builder`和`vue-cli-plugin-electron-builder`，`electronBuilder`中的配置是为了在打包时使用。 还需要在`src`目录下新建一个`background.js`文件： ``` const { app, BrowserWindow } = require('electron') let mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false, nodeIntegration: true, contextIsolation: false } }) mainWindow.loadURL('http://localhost:8080') }) ``` 这个文件用于创建Electron窗口，同时在窗口中加载Vue应用。 5. 运行程序 现在可以运行程序了，在终端中运行以下命令： ``` npm run electron:serve ``` 这个命令会同时启动Vue开发服务器和Electron程序，用于测试程序。 6. 打包程序 如果需要打包程序，可以运行以下命令： ``` npm run electron:build ``` 这个命令会生成打包文件，可以在`dist_electron`目录下找到打包结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值