Open hunter-ji opened 2 years ago
大佬打包白屏是什么原因啊,是electron16有问题吗
是需要配置这个吗?
大佬打包白屏是什么原因啊,是electron16有问题吗
你看看electron的配置在打包时候是否加载的是否为vite buile之后的本地文件?打包时候顺序是vite build然后electron读取其编译好的文件再打包,重点在于如下配置:
主要配置就这几个,都是没错的
主要配置就这几个,都是没错的
![]()
![]()
![]()
既然配置没有问题的话,只能排查一下了,可以从两个方面入手:
还有麻烦看一下环境变量,在打包时是否不是development
。
我直接这样,本地运行
里面有一段because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
,是需要开启script?但是我看electron,javascript默认是true的来
貌似就是这个无法加载script的问题,我手动改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, 这下舒服了. 感谢博主提供这个系列的文章. 受益匪浅.
打包后白屏, 按博主大佬的思路,开发环境下读取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')}`)
还是白屏
非常期待博主的《减少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')}`)
还是白屏
我的依赖版本:
"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"
}
}
奇了怪了版本一样,我macOs和window10都试了都是白屏,你是ts还是js啊,难道是ts有问题?
我用的js , ts的还没试过
大佬们,打包卡在了一个奇怪的位置,这是需要kx上网吗?
大佬们,打包卡在了一个奇怪的位置,这是需要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/"
非常期待博主的《减少electron打包后应用的体积》
多谢,第一次收到这种反馈,开心😄
我直接这样,本地运行
![]()
![]()
里面有一段
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项目,什么代码其他模块都没有,也是白屏
而且也不是某些操作,就是刚建的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,没想到。。
哈哈😄
初次尝试vite+electron,很好,感谢博主
你好,请教一下,执行 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,可能是什么原因呢
按照你的教程、开发环境可以成功运行、但是我打包后无法加载js、css,可能是什么原因呢
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少,其它的方向我暂时没有什么头绪。😣
按照你的教程、开发环境可以成功运行、但是我打包后无法加载js、css,可能是什么原因呢
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少,其它的方向我暂时没有什么头绪。😣
是我的组件库的问题,回导致打包资源路径不对、谢谢作者
按照你的教程、开发环境可以成功运行、但是我打包后无法加载js、css,可能是什么原因呢
你首先确认下报错提示的文件路径是否正确。这个截图信息比较少,其它的方向我暂时没有什么头绪。😣
是我的组件库的问题,回导致打包资源路径不对、谢谢作者
😊😊😊
window环境下似乎要设置node环境,不然const NODE_ENV = process.env.NODE_ENV NODE_ENV会undefined
这里你说的“设置node环境”是指scripts里面的设置环境变量无效要手动设置吗?如果是这意思的话,我建议按照文章里推荐的cross-env来设置环境变量,cross-env可以适配不同平台来设置环境变量,就不需要考虑平台的差异了。
主进程如何热重载?
主进程如何热重载?
cross-env 已经用了,但是好像没生效
引入ipc通信后报这个错
我看网上说要配置vue.config.js
那在vite中应该怎么配置呢
cross-env 已经用了,但是好像没生效
可以调试下,看看是环境变量没写上还是应用没读取到
引入ipc通信后报这个错
我看网上说要配置vue.config.js 那在vite中应该怎么配置呢
vite关于ipc这块的问题我也没处理过,不好意思😮💨
引入ipc通信后报这个
错误我在网上看说要配置vue.config.js 那在vite中应该怎么配置呢
vite关于ipc这块的问题我没有处理过,不好意思😮💨
有解决方法了吗
按照博主的方法已成功跑通。白屏的话main.js中改成mainWindow.loadURL(file://${path.join(__dirname, '../dist/index.html')}
);直接看打包的页面就行了
期待第四篇。
博主你好,请问你有研究过electron window打包后发布到linux改怎么做吗?我用的electron packager生成linux包但是发布到我的ubuntu虚拟机上报错
项目在window上打包可以使用
你好请问该怎么打包成mac上的应用 😢😢
目前我了解的是直接在mac上打包就行了,在不同平台打包生成不同平台适应的包。
博主你好,请问你有研究过electron window打包后发布到linux改怎么做吗?我用的electron packager生成linux包但是发布到我的ubuntu虚拟机上报错
你试试在linux上打包呢
现在了解的是在mac上打包就行了,在不同平台打包我打包不同平台直接对应的包。
你好,我在Mac上打包出现了这个报错,目前暂时查找原因
一. 简介
上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能,现在是时候来看看怎么完成最后一步——打包了。
源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3
系列文章:
二. 思路
先说结论,重点还是在于
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
文件移动进来。其结构如下所示:若还是不太明白可以看看源码中文件结构。
3. 编辑electron/main.js
该文件主要是需要根据环境变量切换electron加载的内容,修改内容如下:
修改后的完整内容如下:
4. 编辑package.json
首先修改
main
属性,将main: main.js
改为main: electron/main.js
。接着,编辑
build
属性:然后,更新
scripts
属性。此处需要先安装两个库:
cross-env
: 该库让开发者只需要注重环境变量的设置,而无需担心平台设置electron-builder
: electron打包库更新后的
scripts
如下:最后,更新后的
package.json
完整内容如下:四. 打包
直接执行打包命令即可开始打包。
打包完成之后,会多出两个文件夹
dist
和dist_electron
,其文件结构如下:至此,便完成了打包。
后面再来写写关于electron的优化,减少electron打包后应用的体积。(这玩意儿确实打包下来有点大呢/狗头)