如何使用Electronjs打包vue页面(vue-cli)打包为桌面应用——第二节

    技术2026-04-17  3

    第一步:将build目录下的electron.js到dist目录中,将路径修改为

    pathname: path.join(__dirname, 'index.html'),

    第二步:将electron-quick-start里的package.json复制到vue_electron项目的dist中,

    "main": "main.js", //

    改为

    "main": "electron.js", //

    第三步:在vue_electron项目的package.json中的scripts中新增一条命令

    "e_build": "electron-packager ./dist HelloWorld --all --out ./outApp --overwrite --icon=./src/assets/home.ico"

    第四步:如果打包经常出现超时,用淘宝镜像

    npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

    第五步:开始打包,打包后的文件夹为outApp

    打包命令释义: electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options> location of project : 项目所在路径 name of project : 打包的项目名称 platform : 确定了你要构建哪个平台的应用(Windows、Mac还是Liux) architecture: 决定了使用x86还是x64还是两个架构都需要 electron version: electron 的版本 optional options: 可选选项 npm run e_build

    不要用cnpm打包否则会出错

    代码已经上传到git,有兴趣的同学可以git拉下来自己研究了

    git项目地址:https://github.com/wlii/vue_electron.git

    git打包成exe文件地址:https://github.com/wlii/vue_electron_exe.git

    Processed: 0.014, SQL: 9