vue2项目使用electron

最新推荐文章于 2024-03-02 12:34:07 发布
最新推荐文章于 2024-03-02 12:34:07 发布
阅读量1k 收藏 3
点赞数 1
文章标签： vue.js electron Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43494078/article/details/129264360
版权

在现有的vue项目中去使用electron第一步肯定是需要先安装electron

  1. 在你的vue项目终端中执行 vue add electron-builder

  • 此处可能出现执行上述命令没有反应，可能是因为你的vue-cli版本不匹配导致，需要重装vue-cli

卸载vue-cli：npm uninstall -g @vue/cli

安装vue-cli：npm install -g @vue/cli

  • 当安装成功后继续执行 vue add electron-builder

这里我选择的是13.0.0版本（当前node版本：15.13.0）

安装完成后，在项目根目录下会多一个background.js文件

background.js中已生成出相应的electron的配置信息

通常我们会在其中修改他的基础配置:

  • 默认开启时的width/height

  • 关闭开启时窗口顶部菜单

  • ...

  1. 当我们将基础配置信息修改完毕后，则需要进入到package.json文件中，这时你会发现在scripts中多出了几种运行或打包的命令

直接执行 npm run electron:build 完成打包

稍等片刻～即可获得新鲜出炉的符合当前系统的.exe文件或.app文件

点击运行即可！

米斯特冯、
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2结合electron开发跨平台应用(桌面端应用)
qq_37312180的博客
03-03 1705
vue2结合electron开发跨平台应用(桌面端应用)
在 Vue2 中使用 Vue-Electron
qq_40602449的博客
04-19 1011
在 Vue2 中使用 Vue-Electron 需要安装。文件夹下创建两个文件。
vue2+electron桌面端一体机应用
xiaoxian_xian的博客
12-04 1045
公司有一个项目需要用Vue转成exe，首先我使用vue-cli脚手架搭建vue2项目，然后安装electron。
electron vue/cli 文件
02-23
electron vue/cli 文件
electron打包若依VUE
06-29
electron打包若依VUE
Vue+Electron（electron-builder + electron-updater + electron-log）
09-06
使用Vue+Electron（electron-builder + electron-updater + electron-log）实现桌面应用程序的开发，面向所有electron使用者学习使用，内部源码都有注释。可参考文章（http://t.csdn.cn/BLM6Y）使用。
vue2+elementui+electron项目配置
06-06
vue2+elementui+electron项目配置
新星计划 Electron+vue2 桌面应用 2 搭建及运行
lsswear的专栏
05-21 2655
这次挨个试下，看哪个方便。第三种试过并且成功，但只是简单用个样例。官网有个现成的例子，也大概用下。生命在于折腾~
Electron-vue2.0
weixin_45086164的博客
08-29 1167
Electron-vue2.0
vue2+electron开发桌面端应用并实现自动更新
07-05 3962
记录自己在实际应用中vue2+electron开发桌面端应用时遇到的问题和解决办法。
vue2+electron 给大家说个相声
m0_70769052的博客
12-21 1194
这里就体现了background.js文件的作用了那我们浅浅看一下里面都是些啥这两张图都干了些什么呢？？是不是从electron引入了一些模块，来我们挑重点。
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 工作中用的 umi+electron 项目大了，启动速度并不理想； 用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {
electronic-vue-webpack：最小的Electron + Vue 2 + Webpack 2设置可快速开发
02-04
电子战网包 厌倦了找到不需要真的花哨的插件的Electron / Vue2 / Webpack2模板？ 尝试使用这种很少依赖的最小模板，以进行快速开发和原型制作。 安装 # Clone the repository once $ git clone https://github.com/pastahito/electron-vue-webpack # Go into the repository (rename it as you wish) $ cd electron-vue-webpack # Install the 7 only dependencies once $ npm inst
electron-vue
01-18
2.执行命令 # install dependencies npm install # serve with hot reload at localhost:9080 npm run dev # build electron application for production 只生成vue静态文件不会自动打包，打包程序已经关闭，因为打包会失败 npm run build # 打包成桌面程序 执行如下命令 electron-builder # lint all JS/Vue component files in `src/` npm run lint 3.遇到BUG 文件路径不能包含中文 如果遇到下载不了的情况需要手动下载 https://npm.taobao.org/mirrors/electron/1.8.8/ 放入C:\Users\Administrator\AppData\Local\electron\Cache electron-builder 最终报错了，但是exe文件已经生成成功
vue+electron 的项目
06-16
vue+electron 的项目 桌面应用程序 npm run dev或者npm run serve启动 可参考package文件中的命令
Vue项目使用electron打包成.exe文件
08-22
甲方要求需要将交付项目打包成.exe文件，这里选用electron来实现该需求 Vue项目使用electron打包成.exe文件,过程中遇到的问题及官方demo配置的记录。
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
vue2结合electron开发桌面端应用
最新发布
qq_37312180的博客
03-02 1088
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入和到 二进制的 Electron。允许您保持一个 JavaScript 代码代码库并创建可在Windows、macOS和Linux上运行的跨平台应用。Electron 经常与 Chromium 一起发布主版本。本文档侧重于发布排期和版本支持政策。
vue 项目怎么使用electron
12-21
要在vue项目中使用electron，首先需要安装并配置好electron相关的依赖。可以使用vue-cli来创建一个vue项目，然后在项目根目录下执行命令安装electron依赖： ``` npm install electron --save-dev ``` 安装完成后，需要配置package.json文件，将main.js指定为electron的入口文件，并添加启动electron的命令： ```json "main": "main.js", "scripts": { "electron": "electron ." } ``` 然后在项目根目录下创建main.js文件作为electron的入口文件，编写electron的启动代码。在main.js中可以引入electron模块，创建一个窗口并加载vue项目生成的dist目录下的index.html文件： ```javascript const { app, BrowserWindow } = require('electron') let mainWindow app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/dist/index.html`) }) ``` 接下来，需要在vue项目中创建一个打包配置文件webpack.electron.conf.js，用来配置vue项目的打包输出目录和文件名。在vue项目的package.json文件中，添加electron的启动命令： ```json "scripts": { "build:electron": "vue-cli-service build --mode production && electron ." } ``` 执行以上步骤后，就可以使用npm run build:electron命令来打包vue项目并启动electron应用了。这样就成功在vue项目中使用electron了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值