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

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

  2. 打包完的接口请求的路径变成了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

发表回复

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