Vue项目用Electron改造为桌面客户端
本文章适用于用Cli3脚手架搭建的项目,这里我拿已有项目为例,所以项目搭建之类的就不在这里一一描述了。
当初在接触的时候,网上一堆electron-vue
的文档,但是我并不推荐使用,因为看了下更新时间,已经有7个月没有更新了,而且脚手架还是老的,不是特别的新。
- electron-vue
- Owner:SimulatedGREG
- Updated:2024-10-05 00:31
- Watch:15472
- Star:15472
- Fork:1544
- An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
这里我比较推荐vue-cli-plugin-electron-builder
,使用方便,而且感觉还在持续更新。
- vue-cli-plugin-electron-builder
- Owner:nklayman
- Updated:2024-10-01 21:16
- Watch:4116
- Star:4116
- Fork:280
- Easily Build Your Vue.js App For Desktop With Electron
准备工作,切换淘宝源
在项目根目录新建.npmrc
文件:
disturl=https://npm.taobao.org/mirrors/node/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
sharp_dist_base_url=https://npm.taobao.org/mirrors/sharp-libvips/
electron_mirror=https://npm.taobao.org/mirrors/electron/
puppeteer_download_host=https://npm.taobao.org/mirrors/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli/
sqlite3_binary_site=https://npm.taobao.org/mirrors/sqlite3/
python_mirror=https://npm.taobao.org/mirrors/python/
registry=https://registry.npm.taobao.org
这里我把常用的源都切换到了淘宝镜像,方便以后其他项目有用。
安装Electron
进入到项目根目录,执行:
vue add electron-builder
选择最新的版本即可。
安装完成之后,你会发现package.json
会多出了几个scripts
命令,并且src
目录下会自动增加background.js
这个文件。
安装依赖
npm install
编译并启动
npm run electron:serve
首次启动比较慢,耐心等待即可。
Electron 配置
常规的配置基本上都在background.js
中
取消跨域限制
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
webSecurity: false
}
})
设置窗口图标
准备windows和macOS两版图标。
- windows: app.ico 最小尺寸:256x256
- macOS: app.png或app.icns 最小尺寸:512x512
把图标文件放到public
目录下:
|- /dist_electron
(略)
|- /public
|- app.icns
|- app.ico
|- app.png
|- favicon.ico
|- index.html
|- /src
(略)
|- .editorconfig
|- .eslintrc.js
|- .gitignore
|- babel.config.js
|- package.json
|- package-lock.json
|- README.md
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
webSecurity: false
},
icon: `${__static}/app.ico`
})
打包配置
修改vue.config.js
,这里我就把修改的部分放出来:
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.wangdaodao.app",
"productName": "AppDemo ", //项目名,也是生成的安装文件名
"copyright": "Copyright © 2020", //版权信息
"directories": {
"output": "./dist_electron" //输出文件路径
},
"win": { //win相关配置
"icon": "./public/app.ico", //图标,当前图标在根目录下,注意这里有两个坑
"target": [
{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64", //64位
"ia32" //32位
]
}
]
},
"mac": {
"icon": "./public/app.png"
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./public/app.ico", // 安装图标
"uninstallerIcon": "./public/app.ico", //卸载图标
"installerHeaderIcon": "./public/app.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "AppDemo", // 图标名称
},
}
}
}
打包APP
npm run electron:build
最终在dist_electron
目录下生成build后的产品。
/dist_electron
|- /bundled
(略)
|- /win-unpacked <-- 绿色版
(略)
|- AppDemo Setup 0.1.0.exe <-- 安装文件
|- AppDemo Setup 0.1.0.exe.blockmap
|- builder-effective-config.yaml
|- index.js
只是一个简单的demo,打出来的包就95M了,有点恐怖,下一步就得优化包的体积了。
demo地址:https://github.com/wangdaodao/vue-electron-template
另外,评论里面有朋友说无法跨域,这次我测试了一下,确实设置webSecurity: false
也是无法解决跨域的问题,这是Electron 9.0.0的一个bug,这里有两种解决方案:
- 把Electron降级到8.5.0,可以解决跨域问题。
在
background.js
中加入如下代码app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');
这个才真有用
找了好久的nsis配置,居然要配置到vue.config.js中,感谢
这个有跨域问题
跨域问题,Electron 9的问题,建议降级到8.5.0:https://github.com/electron/electron/issues/23664