vite创建vue3项目electron打包

最新推荐文章于 2024-10-13 14:50:15 发布

长影缚苍龙

最新推荐文章于 2024-10-13 14:50:15 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

分类专栏：客户端文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qq_36521981/article/details/129322368

本文介绍了如何利用vite和vue3开发项目，并结合electron进行打包。通过修改main.js文件，配置package.json的build属性以适应electron-builder。此外，文章还提到了使用牛牛安装包界面美化控件来优化安装界面，提供了下载和官网链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过vite和vue3进行项目开发，然后通过electron框架进行打包，再通过牛牛安装包界面美化控件对安装界面美化。
1.通过npm create vite@latest 创建vue3项目
2.npm install electron electron-builder -D
3.新建electron 的main.js 文件
4.package.json 添加main:${electron}/main.js
5.package.json 配置 build 属性对electron-build 进行配置

        'productName': xxx系统',//生成exe的名字(允许为汉字)
        "appId": "com.xi.www",//包名  
        "copyright": "xxx科技有限公司",//版权信息
        "directories": { // 输出文件夹(不修改则默认在dist_electron下)
          // "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./build/icons/icon.ico",//