当前位置: 首页 > news >正文

超详细!!!electron-vite-vue开发桌面应用之Electron Forge打包项目(三)

云风网
云风笔记
云风知识库

electronforge可将前端静态页面打包成.exe、.deb和.rpm等,能适配各种平台

一、安装依赖

cd my-app
npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

安装后package.json自动生成新的命令

"scripts": {"dev": "vite","build": "vue-tsc && vite build && electron-builder","preview": "vite preview","start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"
}

直接运行npm run start,报错如下

在这里插入图片描述这个报错信息表明你正在使用的 forge.config.js 文件被当作一个ES模块文件处理,因为它是一个.js扩展名的文件,并且在文件内部使用了ES模块的语法(例如 import, export 等)

解决这个问题的方法取决于你的具体需求和项目设置。以下是几种可能的解决方案:

如果你想要 forge.config.js 被当作CommonJS模块处理,你可以将文件扩展名改为 .cjs,Node.js 会默认将
.cjs 文件作为CommonJS模块处理。

如果你需要继续使用 .js 扩展名,并希望文件被当作ES模块处理,确保你的 package.json 文件中包含 “type”:
“module”,这样Node.js就会将你的项目中的 .js 文件作为ES模块处理。

如果你的项目同时包含CommonJS和ES模块,确保区分它们的文件。CommonJS模块通常是 .cjs 扩展名的,而ES模块通常是
.mjs 扩展名的。

如果你不希望更改文件扩展名,你也可以在 package.json 中设置 “type”:
“commonjs”,这样整个项目都会默认为CommonJS模块。

这里直接将forge.config.js改为forge.config.cjs,再次运行npm run start,打开出现白屏

在这里插入图片描述

(node:78116) electron: Failed to load URL: file:///D:/webPro/yunfeng/electron-vite-project/dist/index.html with error: ERR_FILE_NOT_FOUND
(Use `electron --trace-warnings ...` to show where the warning was created)

这里是由于项目前端部分没有打包,打包文件未读取到,这里改造一下命令

"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","start": "vite build&&electron-forge start","package": "vite build&&electron-forge package","make": "vite build&&electron-forge make"}

再次运行npm run start 正常显示如下

在这里插入图片描述

执行npm run package和npm run make进行项目打包

在这里插入图片描述
这里的原因是package.json没有配置author和description

"author": "nie-ch",
"description": "云风笔记桌面端",

再次执行npm run make,生成out/make文件夹,里面存在安装包exe文件

在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 作业08.16
  • excel 2019版本的index match搜索功能
  • 数据结构-查找
  • python-NLP:4句法分析
  • 共塑AI新篇章 | 云轴科技ZStack亮相2024中国操作系统产业大会
  • 阿里云服务器CentOS7安装MinIO
  • Linux 服务器上简单配置 minio
  • VulnHub:BlueMoon
  • noi 1700 输出 八皇后问题
  • 使用zip包来安装mysql
  • Vue3+Setup使用websocket
  • mybatis xml 动态sql相关语法
  • <Linux>进程概念-下
  • 表操作数据库练习
  • 苹果电脑文件加密?【小编带你挖宝解决问题!】
  • 【刷算法】求1+2+3+...+n
  • Brief introduction of how to 'Call, Apply and Bind'
  • chrome扩展demo1-小时钟
  • ES2017异步函数现已正式可用
  • If…else
  • learning koa2.x
  • Linux后台研发超实用命令总结
  • Linux中的硬链接与软链接
  • Mithril.js 入门介绍
  • select2 取值 遍历 设置默认值
  • spring security oauth2 password授权模式
  • Terraform入门 - 3. 变更基础设施
  • Zsh 开发指南(第十四篇 文件读写)
  • 记一次删除Git记录中的大文件的过程
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 前端_面试
  • 一道闭包题引发的思考
  • MPAndroidChart 教程:Y轴 YAxis
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • !!Dom4j 学习笔记
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • (23)Linux的软硬连接
  • (leetcode学习)236. 二叉树的最近公共祖先
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (二)springcloud实战之config配置中心
  • (附源码)springboot 房产中介系统 毕业设计 312341
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (离散数学)逻辑连接词
  • (排序详解之 堆排序)
  • (五)c52学习之旅-静态数码管
  • (转)shell调试方法
  • .ai域名是什么后缀?
  • .Family_物联网
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .NET之C#编程:懒汉模式的终结,单例模式的正确打开方式
  • @angular/cli项目构建--http(2)
  • @PreAuthorize与@Secured注解的区别是什么?