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 来安装。

本博客若无特殊说明则由 full-stack-trip 原创发布
转载请点名出处:全栈之旅 > vue-element-admin 集成 electron - 同时支持 web 和 electron
本文地址:https://www.kpromise.top/vue-element-admin-electron-and-web/

在 “vue-element-admin 集成 electron - 同时支持 web 和 electron” 上有 3 条评论

  1. 大神,可以加您微信吗,我window集成element-admin-template 打包一直报错。我微信Y2505068703

发表评论

电子邮件地址不会被公开。 必填项已用*标注