发现网上的教程大部分都是vue2.x目录结构不太一样
还有就是将一些问题整合在一起

傻瓜式教程

步骤一

下载electron的demo项目

electorn GitHub
下载demo electron-quick-start
在这里插入图片描述

步骤二

运行demo项目

用你的ide打开demo项目 在项目根目录下

npm install
npm start

注意是根目录
在这里插入图片描述
执行成功界面
在这里插入图片描述

步骤三

在原vue项目里安装相关依赖

其中electron-packager是打成exe文件的插件

npm install electron --save-dev
npm install electron-packager --save-dev

根目录下的vue.config.js文件
在这里插入图片描述
在项目根目录下新建 preload.js,内容可以为空

主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如:window.isElectron = true
在项目中进行判断是否为桌面程序打开,可以调用electron的一些api

将步骤二中的main.js拷贝到项目根目录下,并更名为electron.js

更新electron.js文件里的路径为vue项目生成的静态资源文件index.html
在这里插入图片描述

vue项目package.json文件中增加一条指令
在这里插入图片描述

"electron_dev": "npm run build && electron electron.js"

执行npm run build 生成dist目录
执行npm run electron_dev 启动 electron
即可看到生成的应用程序 但是我失败了hahah
在这里插入图片描述
但是这不重要 并不影响我继续做下去

步骤四

打包exe文件

npm run electron_dev 失败了没关系 直接打包成exe文件执行

复制electron.jspreload.jsdist目录中,并注意修改路径

在这里插入图片描述
在这里插入图片描述

复制demo例子中的package.jsondist目录中,注意修改路径
在这里插入图片描述
在项目的package.json中(注意不是dist下的package.json)为之前下载好的electron-packager,增加一条启动命令
在这里插入图片描述

"electron_build": "electron-packager ./dist untilCloud-07 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
  • sourcedir: 资源(dist/package.json)路径,在本例中既是./dist/

  • appname: 打包出的exe名称

  • platform :平台名称(windows是win32)

  • arch: 版本,本例为x64

执行npm run electron_build,可以看到项目目录中多了一个untilCloud-07-win32-x64文件,找到里面的untilCloud-07.exe运行即可

问题集锦

请求不到服务器

问题描述:因为是前端项目,很可能会有跨域,但是设置了跨域会导致请求不正确访问不到服务器

解决方案:去除跨域,用绝对路径

页面跳转异常、背景图片未成功加载、页面空白

问题描述:能请求服务器但是发现会有页面跳转异常、背景图片未成功加载、有的页面空白

如果router/index.js中配置的默认模式是history,那么打包后就可能会发生以上异常

解决方案:删除mode或者把mode改成hash。
在这里插入图片描述

如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

写在最后

打包过程基本来自此链接
使用electron 将web页面(vue-cli)打包为桌面应用
问题二的解决方案来自此链接
vue+electron打包后页面空白

Logo

前往低代码交流专区

更多推荐