使用vue-cli-plugin-electron-builder创建electron+vue项目

news2024/11/18 1:49:54

文章目录

  • 一、nvm环境
  • 二、安装vue-cli、yarn
  • 三、使用vue项目管理器创建项目
  • 四、使用vue项目管理器安装插件
  • 五、进入my-electron-vue目录，启动electron
  • 六、安装VueDevtools，解决Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
    • ——1.下载VueDevtools放进项目文件夹中
    • ——2.让Electron知道VueDevtools的存在
    • ——其他.让Vue Devtools适应electron(因为低版本electron是个残疾版chromium)
  • 六点一、安装VueDevtools独立版(只使用插件或独立其中一个即可)
  • 七、升级electron最新版(此处是13.0.0升级到22.0.0)
    • ——1.升级和启动
    • ——2.一些启动错误，Manifest和background.js
    • ——3.再次启动
  • 八、打包
  • 九、自定义程序图标
  • 未解决、自行编译vuedevtools的manifest-v3分支处理version 2 is deprecated

一、nvm环境

运行以下命令确认是否安装了nvm

nvm -v

本篇文章需要使用nvm将node版本切换至16.19.0版本，运行以下命令安装和切换版本

nvm install 16.19.0
nvm use 16.19.0

二、安装vue-cli、yarn

运行以下命令全局安装vue-cli

npm install -g @vue/cli

运行以下命令全局安装yarn

npm install -g yarn

修改yarn镜像(查看镜像网站)

yarn config set registry https://registry.npmmirror.com

三、使用vue项目管理器创建项目

运行以下代码打开项目管理器，你的浏览器会打开项目管理器界面

vue ui
  1. 点击左下角🏠房子图标回到首页(首页链接可能会像这样：http://localhost:8000/project/select)
  2. 点击创建
  3. 修改一个合适的路径放置新项目
  4. 点击最下方的"+在此创建新项目"
  5. 项目文件夹，输入项目名，输入my-electron-vue
  6. 点击最下方的下一步
  7. 点击选择默认第一个，Default (Vue 3)
  8. 点击最下方的"创建项目"
  9. 等待项目创建完成

四、使用vue项目管理器安装插件

  1. 点击左侧插件
  2. 点击最右侧的"+添加插件"
  3. 搜索并选中"vue-cli-plugin-electron-builder"
  4. 点击最下方的"⭳安装 vue-cli-plugin-electron-builder"
  5. 等待安装完成
  6. 点击最下方的"✓ 完成安装"(一定要点)
  7. 安装时间较长，等待安装完成

五、进入my-electron-vue目录，启动electron

在my-electron-vue目录下运行以下命令

yarn run my-electron-vue

启动成功了！
my-electron-vue项目启动图
关闭electron窗口

六、安装VueDevtools，解决Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

启动时出现以下错误是因为Vue Devtools安装不上，寻找其他途径安装上就可以了

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

——1.下载VueDevtools放进项目文件夹中

  1. 方法1(版本陈旧，第三方提供，总体不建议)
    网上搜到的浏览器插件crx文件或者xpi文件直接当作压缩包解压至my-electron-vue文件夹中，使用electron的session识别插件
  2. 方法2(建议)
    把Chrome或Edge安装好的插件扒下来(能连上Chrome商店就用Chrome的，连不上就用Edge的或者用FireFox的)
    来自Chrome应用商店的Vue.js devtools
    来自Edge外接程序的Vue.js devtools
    来自Firefox附加组件的Vue.js devtools(点击"下载文件"的小字，任意浏览器都能下载)
    安装后可能的位置(浏览器安装完插件后用Everything软件搜插件ID(长串乱码就是ID))
    %localappdata%\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
    %localappdata%\Microsoft\Edge\User Data\Default\Extensions\olofadcdnkkjdfgjcmjaadnlehnnihnl
    插件安装位置下只有一个文件夹，名称类似"6.4.5_0"，将这个文件夹复制到my-electron-vue目录下
    并改名为"VueDevtools_6.4.5_0_Edge"(我是从Edge里扒下来的，所以改名带Edge)
    路径是这样：.\my-electron-vue\VueDevtools_6.4.5_0_Edge

——2.让Electron知道VueDevtools的存在

修改该文件.\my-electron-vue\src\background.js即可，以下仅展示修改部分
修改前(第一处)

import { app, protocol, BrowserWindow } from 'electron'

修改后(第一处)

import { app, protocol, BrowserWindow } from 'electron'
import { session } from "electron";
import path from "path";

修改前(第二处)

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

修改后(第二处)

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    const VueDevtoolsPath = path.join(__dirname, "../VueDevtools_6.4.5_0_Edge");
    await session.defaultSession.loadExtension(VueDevtoolsPath);
  }
//   if (isDevelopment && !process.env.IS_TEST) {
//     // Install Vue Devtools
//     try {
//       await installExtension(VUEJS3_DEVTOOLS)
//     } catch (e) {
//       console.error('Vue Devtools failed to install:', e.toString())
//     }
//   }
  createWindow()
})

——其他.让Vue Devtools适应electron(因为低版本electron是个残疾版chromium)

注意：electron高版本可以正常识别插件，更建议升级electron来解决，此处可以跳过不看
编辑这个文件.\my-electron-vue\VueDevtools_6.4.5_0_Edge\manifest.json

  1. electron13.0.0(chrome91.0.4472.69)使用ManifestV2时(浏览器插件的一种版本)：
    删除browser_action、update_url属性，防止electron读取并报错
  2. 在未来，electron-version 13.0.0(chrome-version 91.0.4472.69)使用ManifestV3时：
    删除action、update_url属性，可能要删除content_security_policy，防止electron读取并报错
  3. 删除该文件夹.\my-electron-vue\VueDevtools_6.4.5_0_Edge_metadata(该目录是浏览器厂商添加进插件中的验证文件，electron会误读为系统隐藏文件)

六点一、安装VueDevtools独立版(只使用插件或独立其中一个即可)

生产环境不要保留VueDevtools独立版提供的script标签或相关修改！

  1. 在项目根目录新建文件夹，名为VueDevtools_Standalone，像这样：.\my-electron-vue\VueDevtools_Standalone
  2. 在VueDevtools_Standalone目录中运行以下命令安装VueDevtools独立版(此处使用了华为镜像)
npm install --save-dev @vue/devtools --registry=https://mirrors.huaweicloud.com/repository/npm/

等待安装完成，以下错误就是网络不好(独立版界面是electron做的，不容易下载就换镜像多安装几次)

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
  1. 在VueDevtools_Standalone目录中运行以下命令启动VueDevtools独立版
node .\node_modules\@vue\devtools\bin.js

(如果全局安装了VueDevtools独立版，可以直接运行vue-devtools这个命令)
启动完成
VueDevtools独立版截图
要加载VueDevtools独立版，就要卸载其他位置的VueDevtools
所以在.\my-electron-vue\src\background.js中注释掉"loadExtension"这行代码

// await session.defaultSession.loadExtension(VueDevtoolsPath);

编辑.\my-electron-vue\public\index.html，将VueDevtools独立版窗口中显示的script标签复制进去
可以将script标签放在app旁边，类似以下代码(只显示部分)

<script src="http://localhost:8098"></script>
<div id="app"></div>

在my-electron-vue项目中运行以下命令启动electron

yarn run electron:serve

electron启动成功后，回头查看VueDevtools独立版已经成功显示调试界面了
VueDevtools独立版正在调试的界面
生产环境不要保留VueDevtools独立版提供的script标签或相关修改！

七、升级electron最新版(此处是13.0.0升级到22.0.0)

——1.升级和启动

在my-electron-vue项目中运行以下命令升级electron

yarn add --dev electron

然后启动electron

yarn run electron:serve

——2.一些启动错误，Manifest和background.js

1.出现以下提示先不要管：

Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.

这需要VueDevtools插件升级，不用你操心(VueDevtools议题、VueDevtools的manifest-v3分支)
2.出现以下提示：

DeprecationWarning: Invalid 'main' field in 'C:\Users\BEIBEI\Desktop\my-electron-vue\dist_electron\package.json' of 'background.js'. Please either fix that or report it to the module author

修改这个配置文件解决.\my-electron-vue\vue.config.js
修改前(只显示修改部分)

module.exports = defineConfig({
  transpileDependencies: true
})

修改后(只显示修改部分)

module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.output.filename((file) => {
          if (file.chunk.name === "index") {
            return "background.js";
          } else {
            return "[name].js";
          }
        });
      },
    },
  },
  transpileDependencies: true
})

——3.再次启动

再次启动electron

yarn run electron:serve

electron+vue+vuedevtools

八、打包

这个打包步骤特别依赖github文件的下载，保证github连接畅通(UU加速器学术资源加速)

  1. 编辑文件.\my-electron-vue\package.json，添加描述和作者
    编辑前(只显示部分内容)
  "name": "my-electron-vue",

编辑后(只显示部分内容)

  "name": "my-electron-vue",
  "description": "my electron+vue project",
  "author": "author",
  1. 添加图标，添加图标的操作移步到第九步，可以跳过
  2. 在my-electron-vue项目中运行以下命令打包项目
yarn run electron:build

等待打包完成
安装程序生成位置在.\my-electron-vue\dist_electron\my-electron-vue Setup 0.1.0.exe
免安装程序生成位置在.\my-electron-vue\dist_electron\win-unpacked

九、自定义程序图标

提前准备一个png格式的图片，位置放在这里：.\my-electron-vue\public\ve.png
访问Github下载软件，点击链接
解压放到my-electron-vue项目根目录，像这样：.\my-electron-vue\electron-icon-builder.exe
打开软件，Input输入"./public/icon.png"，Output不要动，勾选Flatten，点击Confirm生成图标，如图
Electron icon builder软件运行图

删除dist_electron文件夹(不操作也许影响打包)
在my-electron-vue项目中再次运行以下命令打包项目

yarn run electron:build

打包成功时命令截图
其他：因Windows系统缓存等原因，图标已经修改成功但是无法分辨，可以使用EXE图标提取工具查看

未解决、自行编译vuedevtools的manifest-v3分支处理version 2 is deprecated

(该分支暂时无法正常使用，例如编译到shell-chrome就失败)
你可以尝试以下操作(注意：必须使用yarn)
git clone -b manifest-v3 https://github.com/vuejs/devtools.git，yarn install，yarn run build，目录packages\shell-chrome删除node_modules就可以当插件用了




VueCLIPluginElectronBuilder

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409676.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

npm install xxxx --legacy-peer-deps命令是什么？

npm install xxxx --legacy-peer-deps命令是什么？

本文分享自华为云社区《npm install xxxx --legacy-peer-deps命令是什么&#xff1f;为什么可以解决下载时候产生的依赖冲突呢&#xff1f;》&#xff0c;作者&#xff1a; gentle_zhou 。 在日常使用命令npm install / npm install XX下载依赖的操作中&#xff0c;我经常会遇…
阅读更多...
npm 报错“A complete log of this run can be found in:”解决方法

npm 报错“A complete log of this run can be found in:”解决方法

npm 启动项目 npm run serve/dev的时候报了个错&#xff1a;再次记录一下 ! code ELIFECYCLE npm ERR! errno 1 npm ERR! new0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the new0.1.0 serve script. npm ERR! This is probably n…
阅读更多...
【CSS 文字渐变、背景渐变实现方式】

【CSS 文字渐变、背景渐变实现方式】

CSS 文字渐变&#xff0c;背景渐变的几种实现方式 在我们日常页面开发当中&#xff0c;使用合适的css渐变效果能让我们的界面更加美观&#xff0c;赏心悦目。 一、CSS 文字渐变&#xff1a; 首先&#xff0c;文字渐变实际上是通过背景渐变裁剪成文字的前景色&#xff0c;然后…
阅读更多...
【微信小程序】初入微信小程序

【微信小程序】初入微信小程序

大家好我依旧是山鱼&#x1f41f;&#xff0c;对于初入小程序的同学来说本篇依旧是你的不二选择&#xff0c;它详细的介绍了小程序及小程序&开发者工具的使用&#xff0c;大家快快学起来吧&#xff01; 目录 一&#xff0c;小程序简介 1.1 什么是微信小程序 1.2小程序与…
阅读更多...
前端实现一个名言生成器

前端实现一个名言生成器

The sand accumulates to form a pagoda✨ 写在前面✨ JS是什么&#xff1f;✨ 名言生成器✨ 页面搭建✨ 功能实现✨ 写在前面 在上周我们通过HTML、CSS实现了一个简单的‘我的相册‘页面的搭建&#xff0c;很多伙伴呢跟我说难道前端就只能做一些页面搭建的工作吗&#xff1f;…
阅读更多...
Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系

Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系

目录 项目首页开发 项目准备✌️ 样式开发&#x1f44d; 防抖&#x1f44a; 底部横条✌️ 登陆注册功能开发 样式编写 &#x1f450; 路由守卫实现基础登录校验功能☝️ 使用 axios 发送登录 Mock 请求&#x1f448; 请求函数的封装&#x1f64c; 通过代码拆分增加逻…
阅读更多...
html基本标签

html基本标签

目录 1&#xff0c;标题标签h1-h6 2&#xff0c;段落标签p 3&#xff0c;换行标签br 4&#xff0c;水平线标签hr 5&#xff0c;图片标签img及路径详解(绝对/相对路径) 6&#xff0c;超文本链接标签a 7&#xff0c;超本文链接之锚点 8&#xff0c;div标签 9&#xff0c…
阅读更多...
JS-获取网页滑动距离，并实时监听

JS-获取网页滑动距离，并实时监听

介绍 本文主要介绍通过JS获取网页滑动距离&#xff0c;并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。 一、获取网页滑动距离 JS方法&#xff1a; console.log(网页被卷去的高&#xff1a;, doc…
阅读更多...
05-ES6语法：解构赋值

05-ES6语法：解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式&#xff0c;通过解构赋值&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。 下面我们具体来看看解构赋值是什么&#xff1f;以及是如何使用的&#xff1f; …
阅读更多...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

制作个人简历网页 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><meta name"viewport"content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,u…
阅读更多...
移动端H5网页开发必备知识

移动端H5网页开发必备知识

简介 工欲善其事必先利其器&#xff0c;今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的 移动端H5网页开发常见问题汇总 移动端开发必备知识-Hybrid App 像素 像素即一个…
阅读更多...
在Vue中获取DOM元素的实际宽高

在Vue中获取DOM元素的实际宽高

最近使用 D3.js 开发可视化图表&#xff0c;因为移动端做了 rem 适配&#xff0c;所以需要动态计算获取图表容器的宽高&#xff0c;其中涉及到一些原生DOM API的使用&#xff0c;避免遗忘这里总结一下。 一、获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了…
阅读更多...
【Vue】Vue 项目前端响应式布局及框架搭建

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分&#xff08;1&#xff09…
阅读更多...
Request请求转发getRequestDispatcher

Request请求转发getRequestDispatcher

文章目录一、getRequestDispatcher理解二、RequestDispatcher.forward()方法与HttpServletResponse.sendRedirect()方法的区别三、实现步骤1.编写index.jsp登录页面2.编写跳转页面success.jsp页面3.编写LoginServlet.java类四、运行示例一、getRequestDispatcher理解 request.g…
阅读更多...
Vue项目使用百度地图api

Vue项目使用百度地图api

目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网&#xff0c;&#xff08;认证需要身份证号码&#xff0c;人脸识别&#xff0c;手机百度APP&#xff0c;邮箱地址&#xff09; 注册登录完成&#xff0c;…
阅读更多...
vue中devTools插件安装教程

vue中devTools插件安装教程

vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试&#xff0c;除了传统的浏览器自带的 debug 工具以外&#xff0c;我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTools插件&#xff1a;点击下载 插件安装教程&#xff1a;https://chrome.zzzmh.cn…
阅读更多...
js深拷贝方法

js深拷贝方法

一、ES6中扩展运算符 ES6中的扩展运算符&#xff08;如果只是一层数组或者对象就是深拷贝&#xff0c;多层就是浅拷贝&#xff09; var obj {name : "海绵宝宝",age: 18,sayHello (){console.log("比奇堡早上好");}}var newObj {...obj}console.log(&q…
阅读更多...
Vue中的跨域解决方案

Vue中的跨域解决方案

前言 跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。 同源策略是浏览器的安全机制&#xff0c;跨域的原理就是通过各种方式避开浏览器的安全机制 使用 在项目开发时&#xff0c;对跨域的概念仅限于了解&#xff0c;所以没有注重过程&#xf…
阅读更多...
Vue全新一代状态管理库 Pinia【一篇通】

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么&#xff1f;1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项&#xff08;Option Store &#xff09;3.1 读取 State3.2 …
阅读更多...
命令行 cnpm install 报错： Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

命令行 cnpm install 报错： Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

是不是在 进行 cnpm install 报了同款错误呢&#xff01; G:\Git\owl-read-admin>cnpm install Install fail! Error: Unsupported URL Type: npm:vue-loader^15.9.7 Error: Unsupported URL Type: npm:vue-loader^15.9.7at parseUrl (C:\Users\Lenovo\AppData\Roaming\np…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023