vue项目打包成exe

目标：vue的项目打包成为exe可执行文件

工具：需要使用到Electron框架

首先，我们了解一下什么是Electron；

Electron 是由 GitHub 开发而成的。它是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的框架，它可以兼容 Mac、Windows 和 Linux 三个平台。

Electron 由三大部分组成，分别是 Chromium、Node.js、Native APIs

 

其中，

1. Chromium 为 Electron 提供强大的 UI 渲染能力，可以在不考虑兼容性的情况下，利用强大的 Web 生态来开发界面。
2. Node.js 让 Electron 有了底层的操作能力，比如文件的读写、集成 C++ 等。
3. 内置的原生 API 解决了跨平台的问题。

回归正题：

关于 Electron ，常见的有两种打包方法

第一种：将自己的 vue 项目打包，放到官方的 demo 文件中，改变打包路径

第二种：在自己的 vue 的项目中引入插件，然后打包

推荐使用第一种方法：打包方式简单

第一步：把electron的官方例子扒下来，下面简称A，留着待用：

git clone https://github.com/electron/electron-quick-start

第二步：进入我们自己的项目（下面简称B），修改公共路径为相对路径（很多同学都是这步出了问题，导致 npm run build 后出现白屏情况）：

如果你是 vue-cli3 构建的项目：

执行下列指令，打开vue-cli图形配置界面，选择配置，修改公共路径为 ./ , 保存即可：

vue ui

 

 

或者直接打开项目的配置文件vue-config.js,找到publicPath，将publicPath的值修改为“./”

如果你是vue-cli2 或者 webpack 创建的项目：

进入config文件夹下的 index.js ，将其中的 assetsPublicPath 修改为相对路径 ./ ，保存即可：

 

 

第三步：打包你的项目，我相信这步你已经轻车熟路了~，将打包出来的 dist 文件夹复制到之前下载的A文件夹中

npm run build

第四步：进入刚才下载的A项目，删除项目根目录下的 index.html 文件。

第五步：在A项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html：

// main.js 原始内容

mainWindow.loadFile('index.html')

// 修改后的内容

mainWindow.loadFile('./dist/index.html')

第六步：在A项目中检查 package.json 的命令，正常情况下，运行下列指令即可进行打包效果预览：

以上六步进展都很顺利一般，下面就是要下载A项目的electron的依赖包了

由于electron的源是国外的，如果没有翻墙，下载起来会很慢，网上普遍的建议是更换为淘宝的镜像就行下载，但是我本机无论是官方的还是淘宝的镜像都不行，大家可以根据自己电脑网路情况进行尝试，我本机尝试了很多次都不行，同事给的包在本机执行也报错，无奈只能网上继续找方法。

不知道当前使用的镜像是哪个的，执行此命令查看

npm config get registry

最终在网上找到如下方法，在我本机很快下载好了依赖包

先运行

npm install -g cnpm --registry=https://registry.npmmirror.com

再运行

cnpm install --save-dev electron

速度很快就下载好了，一点都不会卡顿，解决了一个大难题，知乎地址：解决npm安装electron总失败的问题 - 知乎 (zhihu.com)

安装完之后执行npm run start正常情况下就可以看到自己的项目了 ，如果出现白屏请返回查看第二步，看看是否是路径问题

 

在这里我遇到了一个问题：可以正常登录，调试里面也提示接口正常，登录成功了，但是页面就是无法跳转，再次找解决方案吧

问题原因：

大部分vue 前端项目 会使用 js-cookie 这个库 来操作浏览器的cookie，查看项目果然使用了
然而这个库 在electron下 会无法使用 （最坑的是还没报错）
从而导致 登录成功以后 写cookie 读cookie的操作 全部失败
自然而然 登录无法跳转了
解决方案：
不使用该库， 改为使用localStorage

 

至此跳转的问题解决可以正常登录了，由于项目中还使用了cesium.js,三维地球无法显示，报错

Cesium.js:83     GET http://t2.tianditu.gov.cn/ibo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=c&TileMatrix=2&TileRow=0&TileCol=1&style=default&format=tiles&tk=a8d8ff2d1a95b117000f2510a02f5828 403 (Forbidden)

天地图拒绝了项目的访问，这个原因可能是因为天地图的key的问题，因为账号不是我申请的，未测试，待解决

除了未解决的问题，项目算是可以正常打包了，继续我们打包的步骤：

第七步：在A项目中，下载打包需要的依赖 electron-packager

cnpm install electron-packager --save-dev

 

几秒钟就下载好了

第八步：在A项目中，进入 package.json ，在 scripts 中添加 packager 指令，如下所示：

 

有兴趣可自行查看一下这些命令的意思，网上讲解的很详细，此处不在赘述

第九步：运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件：

npm run packager

最后这步我电脑是怎么都打包不了，查看了很多资料依旧没解决

 

以上就是vue项目打包为exe的所有步骤了