Vue-Cli4.x项目通过electron打包桌面应用程序

发现网上的教程大部分都是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.js、preload.js到dist目录中，并注意修改路径

复制demo例子中的package.json到dist目录中,注意修改路径

在项目的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打包后页面空白