无意间了解到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

先改一波baseurl

然后打包：
然后打开登录界面；
这次接口登录对了
但是，界面为何不跳转？？？？？？？？？？？？？WTF!
继续百度：
说什么不能用cookie！尼玛

image.png

要不说大佬牛逼呢
不过我还是听从另一位大佬的：直接改auth，

image.png

cookie改成localstorage，更简单粗暴，全局用getCookie的地方太多了，懒得一点点改了
不过好像真有点用！
接口login-> userinfo->getcountry,一路正常
但是~~~~~~~~~~~~~~~~~~

image.png

这可是线上环境，不敢乱搞

卧槽卧槽！！！！可以啊。。。
基本到这，已经能实现了，但是还有几个问题，上面说到的ico，

image.png

左上角不知道为何，不显示，有待研究；

electron-builder.json

"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

只能再研究研究了；
有知道伙伴也可以告知一下，感谢！