无意间了解到electron这个东西，可以用前端的技术实现打包桌面应用，我也是刚刚接触，遇到的问题也是一个接一个，特此记录一下吧；本来是想用electron做个小应用来着，发现可以直接用vue技术栈打包，好家伙，既然这样，直接拿线上的admin系统打包不就完了。
如果是初始化项目：
// 安装vue-cli脚手架 流程都懂的
yarn global add @vue/cli
//搭建vue-cli
vue create my-elecrton-vue
// 进入目录
cd my-elecrton-vue
// 尝试启动vue-cli
yarn run serve
然后安装打包插件：
// 安装electron
vue add electron-builder
// 启动项目
yarn run electron:serve
OK，完美！
项目结构：
项目结构
感觉多了一个background.js，看样子应该初始化应用的；
background.js相关代码
既然如此，，我直接把写好的vue项目，拿来打包不就完了！想法很美好。。。。
我直接把线上的admin-vue项目拿来开搞，（这个是基于若依系统分离版二开的，感谢若依）：
项目目录
先跑起来试试：
// 运行
npm run electron:serve
涉及公司名称和logo的部分隐藏了
反正是完美运行，
首页
总是感觉左上角的ico不美观，还没找到修改的地方。。
image.png
查百度说，在这个地方加个icon,我也加了，好像并没有什么卵用
加icon
先不管了，，既然能运行，打包成exe问题也不大吧，，满怀信心。。。
// 打包
npm run electron:build
果然如人所愿，第一次不是很顺利，提示ERROR了！
类似这样的飘红
大概意思你懂的，就是下载这个玩意儿出错了呗，导致打包失败，连接超时；
继续百度：
终于找到能让我这种懒人简单明了的操作方法；
直接把这个链接copy，去下载下来；
image.png
解压：
C:\Users\HP\AppData\Local\electron-builder\Cache
丢到这个目录下：
image.png
其他类似错误，可一样操作！
这中间我还用过smart-npm 这个东东，听起来好像解决了点什么东西，但是还是有没有直接下载解压的方法简单粗暴；
功夫不负有心人，，见到这个界面，那打包算是八九不离十了，满怀信心；
image.png
赶紧找到我的exe
image.png
双击运行；
也是一样，完美打开，就不放图了；
但是，登录不了。。。。。。。。。
0651042D.png
切换到tool里面，
发现这个接口是个啥玩意；
app://./login
这是个啥接口啊，，这能登录啊，恍然大悟，serve运行的时候是有代理，打包完之后，没有代理，也没有服务器，这咋请求；要说我真是个小机灵鬼，这个玩意，应该不存在跨域问题，我直接把接口写死：
https://xxx.yunming.com/login 是不是就好了，
先改一波baseurl
然后打包：
然后打开登录界面；
这次接口登录对了
但是，界面为何不跳转？？？？？？？？？？？？？WTF!
继续百度：
说什么不能用cookie！尼玛
image.png
要不说大佬牛逼呢
不过我还是听从另一位大佬的：直接改auth，
image.png
cookie改成localstorage，更简单粗暴，全局用getCookie的地方太多了，懒得一点点改了
不过好像真有点用！
接口login-> userinfo->getcountry,一路正常
但是~~~~~~~~~~~~~~~~~~
image.png
404又是为何啊！！
心态崩了啊。。。。。。。。。。。。。
继续找原因吧，这种情况，我猜应该是路由问题，我尝试点了一下【回到首页】
这可是线上环境，不敢乱搞
卧槽卧槽！！！！可以啊。。。
基本到这，已经能实现了，但是还有几个问题，上面说到的ico，
image.png
左上角不知道为何，不显示，有待研究；
electron-builder.json
自己建一个electron-builder.json，打包配置项，ico就在这里配，还有应用的名称“shortcutName”
"win": { //win相关配置
"icon": "./public/logo.ico", //图标，当前图标在根目录下，注意这里有两个坑
"target": [{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64", //64位
]
}]
},
"mac": {
"icon": "./public/inv_tool.ico"
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./public/logo.ico", // 安装图标
"uninstallerIcon": "./public/logo.ico", //卸载图标
"installerHeaderIcon": "./public/logo.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "AppDemo", // 图标名称
},
看别人解释的怪详细，直接拿过来用用吧
剩下的问题，ico显示，404，子路由不显示；
哭了我。。
067C4AF9.jpg
只能再研究研究了；
有知道伙伴也可以告知一下，感谢！
网友评论