这篇文章主要介绍“vite electron-builder打包配置的方法是什么”，在日常操作中，相信很多人在vite electron-builder打包配置的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vite electron-builder打包配置的方法是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！electron是开发时运行环境，electron-builder是打包exe用的。打开 electron 官网，找到“快速开始”。基本上看完这一章就可以实现将页面通过桌面程序运行出来了。项目更目录下创建 main.js文件与 preload.js 文件, 代码可以直接复制官网示例打开 package.json 在 scrpit 对象中添加 electron 运行命令运行 npm run build, 生成dist文件。并且将main.js中mainWindow.loadFile路径修改为 ‘./dist/index.html’最后运行 npm run start最后运行出来会发现是白屏，打开程序控制台可以看到是js文件找不到。 打免费云主机域名开dist中index.html发现是js和css路径都是绝对路径，所以这里需要修改为相对路径。打开 vite.config.js 配置更路径为相对路径然后重新打包，再运行npm run start 就可以看到页面了。这里在开发环境中有一个问题就是，咱们这里的渲染进程是打包好的dist文件，无法每次修改后热更新。只有重新打包生成新的dist后页面才会更新。这在开发的时候显然是方便的。concurrently：方便 script 同时启动多个命令wait-on：它可以等待文件、端口、套接字和 http(s) 资源可用后触发。开发时热更新，我们就要放弃build一个dist文件来作为渲染进程的做法了。 简单来说，我们正常执行 npm run dev 生成一个页面服务，这样的环境是有热更新的。所以我们只需要在主进程中加载dev服务中的页面作为渲染进程就可以了。 修改一下主进程 main.js然后打开两个终端，第一个先执行 npm run dev，等待服务启动后在另外一个里执行npm run start 即可。当然我们也可以一个命令完成这些。在package.json中添加命令：开发时执行 exe-dev 即可。添加打包命令执行 npm run exe-build ，等待执行结束，dist文件夹下会多一个win-unpacked，其里面有一个exe文件就是我们的程序执行文件。现在我们加载的还是dev服务，所以还需要修改一下主进程main.jsapp.isPackaged 主要用来判断是否为开发环境。我们打开win-unpacked，执行exe文件，会发现页面没有内容，打开F12控制台，发现index.html根本没有找到。其地址 …dist/win-unpacked/resources/app.asar/dist/index.html，找不到的原因可以大概猜一下是我们的页面没有打包进app.asar中。所以我们可以在electron-builder打包配置中设置一下我们要打包的文件。项目更目录创建 electron.config.json这里我们设置了files字段，其目的就是设置打包的数据内容。 productName 就是设置exe文件的文件名。然后修改exe-build命令运行命令后，可以看到exe文件已经修改为test.exe。双击运行也可以看到页面了。最后完善一下打包命令到此，关于“vite electron-builder打包配置的方法是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！
这篇文章主要介绍“C++如何解决最长回文子串问题”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“C++如何解决最长回文子串问题”文章能帮助大家解决问题。Example 1:Input: “babad”Output: “b…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
