Vue项目打包成exe文件(electron)

1.将写好的vue项目打包

        1.1运行vue ui命令

输出目标文件

如果打开index.html是空白的,而且控制台报错获取xxx资源失败的问题,你需要在vue.config.js

上加一个命令,如果没有你需要创建一个。

2.下载electron官方示例

git clone https://github.com/electron/electron-quick-start

下载好是下面这样:

2.1初始化官方示例 npm install 

  

这里要注意你有没有出现这个告警

npm WARN deprecated electron-packager@17.1.2: Please use @electron/packager moving forward. There is no API change, just a package name change

这个是说他的一个包名已经改名字了,在编写下面脚本的时候要注意

2.2运行npm run start 

出现这个窗口说明你初始化成功了。

2.3 将1中打包好的dist文件夹加入到(electron-quick-start)

        将1中打包好的dist文件夹加入到electron-quick-start中,并且删除原来的index.html

 2.4编辑main.js

将原来的 mainWindow.loadFile('index.html') 改为mainWindow.loadFile('./dist/index.html')

mainWindow.loadFile('/index.html') //原来的
mainWindow.loadFile('./dist/index.html')//新的

2.5添加打包脚本

在package.json中添加下面的脚本

这md5 是打包好后的软件名,你可以改成其他的。

 "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ MD5 --platform=win32 --arch=x64  --overwrite"
  },


在2.1初始化的时候如果出现了下面的警告

npm WARN deprecated electron-packager@17.1.2: Please use @electron/packager moving forward. There is no API change, just a package name change

你必需要将脚本换成,才能执行成功

 "scripts": {
    "start": "electron .",
    "packager": "@electron-packager ./ MD5 --platform=win32 --arch=x64  --overwrite"
  },

2.6运行  打包命令 npm run package

这样就是成功了。

结果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

华为ensp中PPP(点对点协议)中的PAP认证 原理和配置命令

作者主页:点击! ENSP专栏:点击! 创作时间:2024年4月8日14点31分 PPP协议(Point-to-Point Protocol)是点到点协议,是一种常用的串行链路层协议,用于在两个节点之间建立点…

2024年4月7日16:58:09答辩笔记

尚硅谷总结毕业设计编写:(ppt尽量好看点,放图(流畅图,时序图放一放),少字,) 总结:(这样给人体验感要好,语言、逻辑清晰) 1…

【LeetCode热题100】118. 杨辉三角(动态规划)

一.题目要求 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 二.题目难度 简单 三.输入样例 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示…

笔记 | 编译原理L1

重点关注过程式程序设计语言编译程序的构造原理和技术 1 程序设计语言 1.1 依据不同范型 过程式(Procedural programming languages–imperative)函数式(Functional programming languages–declarative)逻辑式(Logical programming languages–declarative)对象式(Object-or…

Python基础教程:网络爬虫的工作原理

网络爬虫是一种数据收集的方式,广泛用于搜索引擎、市场分析等领域。 爬虫从一个或若干种子页面开始,获得种子页面上的链接,并根据需求来追踪其中的一些链接,达到遍历所有网页的目的。在抓取网页的过程中,一方面提取需…

「漫画」数据工程师面试常见问题之数据倾斜

话说,闹钟一响,现实照进梦想,又是李大虎面试找工作的一天。 李大虎心里一直有个想法,如果一天睡20个小时,然后这20个小时全做美梦,醒来的4个小时用来吃喝拉撒,这样岂不就和那些富二代一样了&am…

【机器学习入门】集成学习之梯度提升算法

系列文章目录 第1章 专家系统 第2章 决策树 第3章 神经元和感知机 识别手写数字——感知机 第4章 线性回归 第5章 逻辑斯蒂回归和分类 第5章 支持向量机 第6章 人工神经网络(一) 第6章 人工神经网络(二) 卷积和池化 第6章 使用pytorch进行手写数字识别 实操练习 使用Yolo模型进…

机器视觉系统光源的分类及选择

机器视觉系统 机器视觉系统是一种基于计算机视觉技术的智能系统,主要用于对图像或视频进行分析、处理和识别。一个典型的机器视觉系统通常由以下几个组成部分构成: 光源 机器视觉光源是机器视觉系统的关键组成部分之一。机器视觉光源直接影响图像质量&am…

Qt:窗口、按钮类、行编辑器、标签类

作业&#xff1a;QQ登录界面 mywidget.h #ifndef MYWIDGET_H #define MYWIDGET_H#include <QWidget> #include <QIcon> #include<QMovie> #include <QLabel> #include <QPushButton> #include <QLineEdit> class MyWidget : public QWid…

jest单元测试——项目实战

jest单元测试——项目实战 一、纯函数测试二、组件测试三、接口测试四、React Hook测试&#x1f4a5; 其他的疑难杂症另&#xff1a;好用的方法 &#x1f31f; 温故而知新&#xff1a;单元测试工具——JEST 包括&#xff1a;什么是单元测试、jest的基本配置、快照测试、mock函数…

加州大学欧文分校英语基础语法专项课程02:Questions, Present Progressive and Future Tenses 学习笔记

Questions, Present Progressive and Future Tenses Course Certificate 本文是学习 Questions, Present Progressive and Future Tenses 这门课的学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 文章目录 Questions, Present Progressive and Future TensesWeek 01: …

大语言模型(LLM)为什么会产生幻觉?

一、幻觉的概念 在大语言模型&#xff08;LLM&#xff09;的语境之下&#xff0c;“幻觉”&#xff08;hallucination&#xff09;指的是模型在没有足够证据支持的情况下&#xff0c;生成的错误或虚构的信息。这种现象在自然语言处理&#xff08;NLP&#xff09;任务中尤其突出…

2024年MathorCup妈妈杯数学建模思路C题思路解析+参考成品

1 赛题思路 (赛题出来以后第一时间在群内分享&#xff0c;点击下方群名片即可加群) 2 比赛日期和时间 报名截止时间&#xff1a;2024年4月11日&#xff08;周四&#xff09;12:00 比赛开始时间&#xff1a;2024年4月12日&#xff08;周五&#xff09;8:00 比赛结束时间&…

jdk8新特性 方法引用

简介 lambda表达式是用来简化匿名内部类的方法引用 使用来简化 lambda表达式的 方法引用的标志 两个冒号 静态方法 静态方法 class CompareByAge {public static int compare(Student o1, Student o2) {return o1.getAge() - o2.getAge();} }静态方法引用 Arrays.sort(students…

游戏商业化活动通用测试点

备注:本文为博主原创文章,未经博主允许禁止转载。如有问题,欢迎指正。 个人笔记(整理不易,有帮助点个赞) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 …

谷歌(Google)技术面试——在线评估问题(三)

谷歌&#xff08;Google&#xff09;面试过程的第一步&#xff0c;你可能会收到一个在线评估链接。 评估有效期为 7 天&#xff0c;包含两个编码问题&#xff0c;需要在一小时内完成。 以下是一些供你练习的在线评估问题。 在本章结尾处&#xff0c;还提供了有关 Google 面试不…

免费分享一套微信小程序在线订餐(点餐)配送系统(SpringBoot+Vue),帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序在线订餐(点餐)配送系统(SpringBootVue)&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序在线订餐(点餐)配送系统(SpringBootVue) Java毕业设计_哔哩哔哩_bilibili【免费】微信小程序在…

配置 施耐德 modbusTCP 分布式IO子站 PRA0100

模块官方介绍&#xff1a;https://www.schneider-electric.cn/zh/product/BMXPRA0100 1. 总体步骤 2. 软件组态&#xff1a;在 Unity Pro 软件中创建编辑 PRA 模块工程 2.1 新建项目 模块箱硬件型号如下 点击 Unity Pro 软件左上方【新建】按钮&#xff0c;选择正确的 DIO …

【C语言】如何判断一个机器的大小端

如何判断一个机器的大小端 一&#xff1a;什么是机器的大小端二&#xff1a;为什么会有大小端三&#xff1a;设计一个小程序来判断当前机器的大小端方法一&#xff1a;指针类型强转方法二&#xff1a;联合体 一&#xff1a;什么是机器的大小端 机器的大小端是指在内存中存储多…

C++ | Leetcode C++题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; class Solution { private:unordered_map<char, int> symbolValues {{I, 1},{V, 5},{X, 10},{L, 50},{C, 100},{D, 500},{M, 1000},};public:int romanToInt(string s) {int ans 0;int n s.length();for (int i 0; i < n; i) …