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

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

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

一、安装依赖

javascript 复制代码
cd my-app
npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

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

javascript 复制代码
"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,打开出现白屏

javascript 复制代码
(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)

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

javascript 复制代码
"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

javascript 复制代码
"author": "nie-ch",
"description": "云风笔记桌面端",

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

相关推荐
牧羊狼的狼28 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常5 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip5 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js