vue-element-admin 集成 electron - 同时支持 web 和 electron

vue-element-admin 是个不错的后台模板，而 electron 赋予了我们使用 css + js 构建跨平台软件的能力，如果能将两者结合，同时支持 web 和 electron 则非常完美。本文将告诉你，如果把 vue-element-admin 与 electron 集成。确切的说，本文将告诉你，如何把一个 vue 项目与 electron 集成。

2020-07-14 更新，可以直接使用 https://gitee.com/ijustyce/vue-element-admin-electron 已修复 Windows 没有 cp 命令的坑。

首先，我们需要 按照 electron 快速打包 vue 项目 里的步骤（下面简称之前的文章），集成 electron，但是，略作调整：

1、package.json 的 script 里 加入如下代码，而不是 之前的文章（即 electron 快速打包 vue 项目 一文，下文不再赘述）里 第二步的代码。

"electron": "cross-env NODE_ENV=dev node_modules/.bin/electron pack/electron",
"pack:prepare": "npm run build:prod && cp -r pack/electron/* dist/",
"pack:win": "node_modules/.bin/electron-builder --project=dist -w -p never",
"pack:mac": "node_modules/.bin/electron-builder --project=dist -m -p never",
"pack:linux": "node_modules/.bin/electron-builder --project=dist -l -p never"

2、修改第 4 步（即 electron-main.js）中的 9988 为 9527（vue-element-admin 默认的端口是 9527）

3、修改 vue-element-admin 项目 根目录下的 vue.config.js 里的 publicPath 为 "./"  ，没错，前面多加一个点即可。截止发文前，是在第27 行。

4、修改 src -> utils 下 的 auth.js 如下：

const TokenKey = 'Admin-Token'

export function getToken() {
  const token = localStorage.getItem(TokenKey)
  return token
}

export function setToken(token) {
  localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return localStorage.removeItem(TokenKey)
}

至此，大工搞成！npm run dev 依旧是 web 版本。如果要打包，则 npm run pack:prepare 以及 npm run pack:linux 等，与之前的文章一致。如果说有什么不满意的，那可能是 src/components/Tinymce/index.vue 这个文件的格式化有问题，你可以 ./node_modules/.bin/eslint --fix src/components/Tinymce/index.vue 自动修复下。

另外，arch 安装时提示 libappindicator-shar 依赖找不到，可通过 sudo pacman -U xxxx --assume-installed libappindicator-shar 来安装。