Blog
Blog copied to clipboard
hunter-ji
Vite+Electron快速构建一个VUE3桌面应用(三)——打包
一. 简介
上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能，现在是时候来看看怎么完成最后一步——打包了。
源码：https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3
系列文章：
- Vite+Electron快速构建一个VUE3桌面应用(一)
- Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载
- Vite+Electron快速构建一个VUE3桌面应用(三)——打包
二. 思路
先说结论，重点还是在于mainWindow.loadURL()。
打包后还是加载http://localhost:3000是无法运行的，因此，此处需要先用vite打包好，然后使用electron-builder加载vite打包后的文件进行打包。
为了代码能够根据不同环境在运行时加载http://localhost:3000，在打包时加载文件，此处需要使用环境变量来切换生产和开发环境。
三. 实现
1. 环境变量
此处使用环境变量NODE_ENV来切换生产和开发环境，生产环境为NODE_ENV=production，开发环境为NODE_ENV=development，若有其它如release等环境可在此基础上拓展。
2. 创建electron文件夹
在项目根目录下创建文件夹electron，将main.js和preload.js文件移动进来。其结构如下所示：
.
├── README.md
├── electron
│ ├── main.js
│ └── preload.js
...
若还是不太明白可以看看源码中文件结构。
3. 编辑electron/main.js
该文件主要是需要根据环境变量切换electron加载的内容，修改内容如下：
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
修改后的完整内容如下：
// electron/main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
// 打开开发工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
// 打开的窗口，那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
4. 编辑package.json
首先修改main 属性，将main: main.js改为main: electron/main.js。
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
...
}
接着，编辑build属性：
"build": {
"appId": "com.your-website.your-app",
"productName": "ElectronApp",
"copyright": "Copyright © 2021 <your-name>",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
然后，更新scripts属性。
此处需要先安装两个库：
-
cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置 -
electron-builder: electron打包库
yarn add -D cross-env electron-builder
更新后的scripts如下：
{
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 此处需要设置环境变量以保证开发时加载url
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
"electron:build": "vite build && electron-builder" // 新增打包命令
}
最后，更新后的package.json完整内容如下：
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
"electron:build": "vite build && electron-builder"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"electron-builder": "^22.13.1",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
},
"build": {
"appId": "com.my-website.my-app",
"productName": "MyApp",
"copyright": "Copyright © 2021 kuari",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
}
四. 打包
直接执行打包命令即可开始打包。
yarn electron:build
打包完成之后，会多出两个文件夹dist和dist_electron，其文件结构如下：
.
├── README.md
├── dist
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── dist_electron
│ ├── MyApp-0.0.0-mac.zip
│ ├── MyApp-0.0.0-mac.zip.blockmap
│ ├── MyApp-0.0.0.dmg
│ ├── MyApp-0.0.0.dmg.blockmap
│ ├── builder-debug.yml
│ ├── builder-effective-config.yaml
│ └── mac
...
至此，便完成了打包。
后面再来写写关于electron的优化，减少electron打包后应用的体积。（这玩意儿确实打包下来有点大呢/狗头）
是需要配置这个吗？
大佬打包白屏是什么原因啊，是electron16有问题吗
你看看electron的配置在打包时候是否加载的是否为vite buile之后的本地文件？打包时候顺序是vite build然后electron读取其编译好的文件再打包，重点在于如下配置：
主要配置就这几个，都是没错的
既然配置没有问题的话，只能排查一下了，可以从两个方面入手：
- 手动vite build，然后开发环境下读取dist下编译的文件（而不去读热加载的url），看看是否白屏以及有无报错
- 使用https://www.npmjs.com/package/electron-log，这个库，将可能的报错点输出成日志文件，在打包后查看日志
还有麻烦看一下环境变量，在打包时是否不是development。
我直接这样，本地运行
里面有一段because the document's frame is sandboxed and the 'allow-scripts' permission is not set.，是需要开启script？但是我看electron，javascript默认是true的来
打包后白屏, 按博主大佬的思路,开发环境下读取dist下编译的文件. 执行yarn electron:serve后, 报错:NODE_ENV is not defined
将NODE_ENV 修改为: process.env.NODE_ENV
yarn electron:serve 正常运行 yarn electron:build 打包后, 正常运行
以前都是用webpack , 一直想体验一下vite+electron, 这下舒服了. 感谢博主提供这个系列的文章. 受益匪浅.
打包后白屏, 按博主大佬的思路,开发环境下读取dist下编译的文件. 执行yarn electron:serve后, 报错:NODE_ENV is not defined
将NODE_ENV 修改为: process.env.NODE_ENV
yarn electron:serve 正常运行 yarn electron:build 打包后, 正常运行
以前都是用webpack , 一直想体验一下vite+electron, 这下舒服了. 感谢博主提供这个系列的文章. 受益匪浅.
你electron是什么版本的呢，我打包也是白屏，不是 process.env.NODE_ENV的问题，我直接去掉判断写死
mainWindow.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)
还是白屏
打包后白屏, 按博主大佬的思路,开发环境下读取dist下编译的文件. 执行yarn electron:serve后, 报错:NODE_ENV is not defined 将NODE_ENV 修改为: process.env.NODE_ENV yarn electron:serve 正常运行 yarn electron:build 打包后, 正常运行 以前都是用webpack , 一直想体验一下vite+electron, 这下舒服了. 感谢博主提供这个系列的文章. 受益匪浅.
你electron是什么版本的呢，我打包也是白屏，不是 process.env.NODE_ENV的问题，我直接去掉判断写死
mainWindow.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)还是白屏
我的依赖版本:
"dependencies": { "vue": "^3.2.23" }, "devDependencies": { "@vitejs/plugin-vue": "^1.10.2", "concurrently": "^6.4.0", "cross-env": "^7.0.3", "electron": "^16.0.4", "electron-builder": "^22.14.5", "vite": "^2.7.0", "wait-on": "^6.0.0" },
q
我的依赖版本:
"dependencies": { "vue": "^3.2.23" }, "devDependencies": { "@vitejs/plugin-vue": "^1.10.2", "concurrently": "^6.4.0", "cross-env": "^7.0.3", "electron": "^16.0.4", "electron-builder": "^22.14.5", "vite": "^2.7.0", "wait-on": "^6.0.0" },
奇了怪了版本一样，我macOs和window10都试了都是白屏，你是ts还是js啊，难道是ts有问题？
{
"dependencies": {
"axios": "~0.21.4",
"vue": "~3.2.23",
"vue-router": "~4.0.12",
"vuex": "~4.0.2"
},
"devDependencies": {
"@arco-design/web-vue": "^2.9.0",
"@commitlint/cli": "~13.2.1",
"@commitlint/config-conventional": "~13.2.0",
"@ehutch79/vite-eslint": "~0.0.1",
"@types/node": "~16.11.11",
"@typescript-eslint/eslint-plugin": "~4.33.0",
"@typescript-eslint/parser": "~4.33.0",
"@vitejs/plugin-vue": "~1.10.2",
"commitizen": "~4.2.4",
"concurrently": "^6.4.0",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "~3.3.0",
"cz-customizable": "~6.3.0",
"electron": "~16.0.4",
"electron-builder": "~22.14.5",
"eslint": "~7.32.0",
"eslint-config-airbnb-base": "~14.2.1",
"eslint-config-prettier": "~8.3.0",
"eslint-plugin-import": "~2.25.3",
"eslint-plugin-prettier": "~4.0.0",
"eslint-plugin-vue": "~7.20.0",
"husky": "~7.0.4",
"lint-staged": "~11.2.6",
"prettier": "~2.5.0",
"sass": "~1.44.0",
"typescript": "~4.4.3",
"vite": "~2.7.0",
"vue-tsc": "~0.3.0",
"wait-on": "^6.0.0"
}
}
大佬们，打包卡在了一个奇怪的位置，这是需要kx上网吗？
最后把需要下载的文件本地下载好，放到了electron的缓存文件里就好了。
windows 里 electron的缓存文件在 ”C:\Users{username}\AppData\Local\electron\Cache“ 还有一个是 electron-builder 的缓存文件夹 "C:\Users{username}\AppData\Local\electron-builder\Cache，最后解决是这样：
配置地址即可
npm config set ELECTRON_MIRROR "https://npmmirror.com/mirrors/electron/"
npm config set ELECTRON_BUILDER_BINARIES_MIRROR "https://mirrors.huaweicloud.com/electron-builder-binaries/"
里面有一段
because the document's frame is sandboxed and the 'allow-scripts' permission is not set.，是需要开启script？但是我看electron，javascript默认是true的来
手动修改之后正常显示的话应该没什么问题，目前猜测可能是你的某些操作原本在web上正常使用，但是在electron中需要通过其api来实现导致的错误。还有，electron的F12调试显示那个警告并不影响的。
手动修改之后正常显示的话应该没什么问题，目前猜测可能是你的某些操作原本在web上正常使用，但是在electron中需要通过其api来实现导致的错误。还有，electron的F12调试显示那个警告并不影响的。
是手动改为加载本地html文件也不行
而且也不是某些操作，就是刚建的vite hellow项目，什么代码其他模块都没有，也是白屏
只是新建的项目的话，文章上附了源码，你可以对比看一下。如果你觉得需要，可以把你遇到问题的仓库链接发下，我看一下呢。
你好方便的话可以看一下 https://github.com/seepine/vite-vue3-electron-starter
router这里改成hash模式
const router = createRouter({
history: createWebHashHistory(),
routes
})
你好方便的话可以看一下 https://github.com/seepine/vite-vue3-electron-starter
router这里改成hash模式
const router = createRouter({ history: createWebHashHistory(), routes })
啊这... 好吧可以了，我之前怀疑过history的问题，我以为至少首页应该也能显示出来就没尝试改成hash，没想到。。
你好方便的话可以看一下 https://github.com/seepine/vite-vue3-electron-starter
router这里改成hash模式
const router = createRouter({ history: createWebHashHistory(), routes })啊这... 好吧可以了，我之前怀疑过history的问题，我以为至少首页应该也能显示出来就没尝试改成hash，没想到。。
哈哈😄
你好，请教一下，执行 yarn electron:build 之后，vue正常打包，但是electron-builder报错，我找了很久不知道什么原因，麻烦你能不能看一下，谢谢~（代码我是直接 clone 的
你好，请教一下，执行 yarn electron:build 之后，vue正常打包，但是electron-builder报错，我找了很久不知道什么原因，麻烦你能不能看一下，谢谢~（代码我是直接 clone 的
你好，这里有个报错，就关于电脑底层的，你可以修复一下看看呢。
你好，请教一下，执行 yarn electron:build 之后，vue正常打包，但是electron-builder报错，我找了很久不知道什么原因，麻烦你能不能看一下，谢谢~（代码我是直接 clone 的
你好，这里有个报错，就关于电脑底层的，你可以修复一下看看呢。
你好，请教一下，执行 yarn electron:build 之后，vue正常打包，但是electron-builder报错，我找了很久不知道什么原因，麻烦你能不能看一下，谢谢~（代码我是直接 clone 的
你好，这里有个报错，就关于电脑底层的，你可以修复一下看看呢。
😊😊😊
按照你的教程、开发环境可以成功运行、但是我打包后无法加载js、css，可能是什么原因呢
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少，其它的方向我暂时没有什么头绪。😣
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少，其它的方向我暂时没有什么头绪。😣
是我的组件库的问题，回导致打包资源路径不对、谢谢作者
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少，其它的方向我暂时没有什么头绪。😣
是我的组件库的问题，回导致打包资源路径不对、谢谢作者
😊😊😊
window环境下似乎要设置node环境，不然const NODE_ENV = process.env.NODE_ENV NODE_ENV会undefined
这里你说的“设置node环境”是指scripts里面的设置环境变量无效要手动设置吗？如果是这意思的话，我建议按照文章里推荐的cross-env来设置环境变量，cross-env可以适配不同平台来设置环境变量，就不需要考虑平台的差异了。
引入ipc通信后报这个错
我看网上说要配置vue.config.js 那在vite中应该怎么配置呢
vite关于ipc这块的问题我也没处理过，不好意思😮💨
引入ipc通信后报这个
vite关于ipc这块的问题我没有处理过，不好意思😮💨
有解决方法了吗
按照博主的方法已成功跑通。白屏的话main.js中改成mainWindow.loadURL(file://${path.join(__dirname, '../dist/index.html')});直接看打包的页面就行了
期待第四篇。
博主你好，请问你有研究过electron window打包后发布到linux改怎么做吗？我用的electron packager生成linux包但是发布到我的ubuntu虚拟机上报错
博主你好，请问你有研究过electron window打包后发布到linux改怎么做吗？我用的electron packager生成linux包但是发布到我的ubuntu虚拟机上报错
你试试在linux上打包呢
现在了解的是在mac上打包就行了，在不同平台打包我打包不同平台直接对应的包。
你好，我在Mac上打包出现了这个报错，目前暂时查找原因
我看报错有一个权限问题，你试试不要放到桌面上的文件夹，而是在用户家目录下编译看看呢
大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]
大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]
你好，你可以看下文章步骤三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀
你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。
以及nodejs官方的说明，也可以看看。
大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀
你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。
以及nodejs官方的说明，也可以看看。
好的，谢谢大佬，受教了！
大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀
你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。
好的，谢谢大佬，受教了！
😊😊😊
大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]
你好，你可以看下文章步骤
三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。mainWindow.loadURL( NODE_ENV === 'development' ? 'http://localhost:3000' :`file://${path.join(__dirname, '../dist/index.html')}` );
大佬，那有什么解决方案吗，能够让electron桌面端开启一个webservice，不去访问公网ip
大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]
你好，你可以看下文章步骤
三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。mainWindow.loadURL( NODE_ENV === 'development' ? 'http://localhost:3000' :`file://${path.join(__dirname, '../dist/index.html')}` );大佬，那有什么解决方案吗，能够让electron桌面端开启一个webservice，不去访问公网ip
可以啊，electron底层交互是node，你可以写个进程跑web。但是还是建议能使用文件还是使用文件吧。
大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀
你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。
好的，谢谢大佬，受教了！
😊😊😊
大哥，我还想问个问题
就是Electron 是不是到目前为止都不支持原生的ES6模块导入呀（尽管nodejs版本已经支持了）
我试了很多次都不行
比如下面这种简单情况：
从main.ts里引入test.mjs
main.ts:
test.mjs:
这是对应的minimal repo
https://github.com/KKKZOZ/electron-minimal
大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀
你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。
好的，谢谢大佬，受教了！
😊😊😊
大哥，我还想问个问题 就是Electron 是不是到目前为止都不支持原生的ES6模块导入呀（尽管nodejs版本已经支持了） 我试了很多次都不行 比如下面这种简单情况： 从main.ts里引入test.mjs main.ts:
test.mjs:
electron 目前只支持cjs，不能csm，具体看看下面的issue链接。 https://github.com/electron/electron/issues/21457
