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

作者 full-stack-trip发表于

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” 上有 11 条评论

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

    回复

  3. 打包完的接口请求的路径变成了POST file:///E:/api/user/login ，麻烦问下这个要怎么解决呢？

    回复

      1. 您好，centos7 打包报错，麻烦问下是什么原因？

        [root@localhost vue-element-admin-electron]# npm run pack:linux

        > vue-element-admin@4.2.1 pack:linux /vswork/vue-element-admin-electron
        > electron-builder --project=dist -l -p never

        • electron-builder version=22.10.5 os=3.10.0-1160.el7.x86_64
        • loaded configuration file=package.json ("build" field)
        • writing effective config file=dist/build-apps/builder-effective-config.yaml
        • installing production dependencies platform=linux arch=x64 appDir=/vswork/vue-element-admin-electron/dist
        • packaging platform=linux arch=x64 electron=8.2.4 appOutDir=dist/build-apps/linux-unpacked
        • Unpacking electron zip zipPath=undefined
        • building target=pacman arch=x64 file=dist/build-apps/top.kpromise.k-note
        ⨯ cannot execute cause=exit status 1
        out={:timestamp=>"2021-05-31T12:46:08.869347+0800", :message=>"Process failed: /bin/bash failed (exit code 127). Full command was:[\"/bin/bash\", \"-c\", \"LANG=C bsdtar -czf .MTREE --format=mtree --options='!all,use-set,type,uid,gid,mode,time,size,md5,sha256,link' opt usr .PKGINFO .INSTALL\"]", :level=>:error}

        command=/root/.cache/electron-builder/fpm/fpm-1.9.3-2.3.1-linux-x86_64/fpm -s dir --force -t pacman -d c-ares -d ffmpeg -d gtk3 -d http-parser -d libevent -d libvpx -d libxslt -d libxss -d minizip -d nss -d re2 -d snappy -d libnotify -d libappindicator-gtk3 --pacman-compression xz --architecture amd64 --name k-note --after-install /tmp/t-fhwipt/0-after-install --after-remove /tmp/t-fhwipt/1-after-remove --description '
        k-note' --version 1.0.0 --package /vswork/vue-element-admin-electron/dist/build-apps/top.kpromise.k-note --maintainer 'ijustyce ' --url https://www.kpromise.top --vendor 'ijustyce ' /vswork/vue-element-admin-electron/dist/build-apps/linux-unpacked/=/opt/k-note /vswork/vue-element-admin-electron/dist/icon.png=/usr/share/icons/hicolor/0x0/apps/k-note.png /tmp/t-fhwipt/2-k-note.desktop=/usr/share/applications/k-note.desktop
        workingDir=
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! vue-element-admin@4.2.1 pack:linux: `electron-builder --project=dist -l -p never`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the vue-element-admin@4.2.1 pack:linux script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! /root/.npm/_logs/2021-05-31T04_46_08_992Z-debug.log

        回复

        1. 修改 pack/electron/package.json 里 "target": "pacman" 为 "target": "rpm" centos 的包是 rpm 类型，不是 pacman，pacman 是 arch的。

          回复

          1. 大神你微信号是什么，我改了还有问题！我的微信号是fengxin5afamily

          2. 您好，您可以加我微信吗，我的微信号是fengxin5afamily 麻烦您添加一下，有偿解决一些问题！

          3. 修改为 rpm 后报错如下：
            [root@localhost vue-element-admin-electron]# npm run pack:linux

            > vue-element-admin@4.2.1 pack:linux /vswork/vue-element-admin-electron
            > electron-builder --project=dist -l -p never

            • electron-builder version=22.10.5 os=3.10.0-1160.el7.x86_64
            • loaded configuration file=package.json ("build" field)
            • writing effective config file=dist/build-apps/builder-effective-config.yaml
            • installing production dependencies platform=linux arch=x64 appDir=/vswork/vue-element-admin-electron/dist
            • packaging platform=linux arch=x64 electron=8.2.4 appOutDir=dist/build-apps/linux-unpacked
            • Unpacking electron zip zipPath=undefined
            • building target=rpm arch=x64 file=dist/build-apps/top.kpromise.k-note
            ⨯ to build rpm, executable rpmbuild is required, please install: sudo apt-get install rpm
            ⨯ /vswork/vue-element-admin-electron/node_modules/app-builder-bin/linux/x64/app-builder exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE stackTrace=
            Error: /vswork/vue-element-admin-electron/node_modules/app-builder-bin/linux/x64/app-builder exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
            at ChildProcess. (/vswork/vue-element-admin-electron/node_modules/builder-util/src/util.ts:243:14)
            at Object.onceWrapper (events.js:421:26)
            at ChildProcess.emit (events.js:314:20)
            at maybeClose (internal/child_process.js:1022:16)
            at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
            npm ERR! code ELIFECYCLE
            npm ERR! errno 1
            npm ERR! vue-element-admin@4.2.1 pack:linux: `electron-builder --project=dist -l -p never`
            npm ERR! Exit status 1
            npm ERR!
            npm ERR! Failed at the vue-element-admin@4.2.1 pack:linux script.
            npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

            npm ERR! A complete log of this run can be found in:
            npm ERR! /root/.npm/_logs/2021-05-31T09_19_32_586Z-debug.log

          4. 错误信息已经很明确了，to build rpm, executable rpmbuild is required, please install: sudo apt-get install rpm，你需要在终端执行：sudo dnf install rpm

发表回复

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