如何将vue项目打包成.exe文件，不想踩坑就来这里！

2023-09-24 21:11| 来源: 网络整理| 查看: 265

需求背景

甲方要求需要将交付项目打包成.exe文件，这里选用electron来实现该需求（也可以使用nw.js ）。

实现方案

方案一：

将自己的 vue 项目进行相关配置后进行打包，放到官方的提供的 demo 文件中，改变打包路径之后再打包成.exe文件。

方案二：

在自己Vue项目中引入插件再进行打包。

我最终选择方案一来实现该需求，因为比较简单快捷，但是打包过程中也遇到了很多问题。

实现步骤

第一步：登录你的GitHub账号（我当时未登录账号，克隆好几次都失败了），然后通过如下命令将官方demo克隆到本地，然后安装依赖包：

git clone https://github.com/electron/electron-quick-start npm i // 安装依赖包

在安装依赖包的时候，我遇到了node版本过低的问题，我当时node版本是14.16.0，但是终端提醒的版本必须大于14.17.5 ，我推荐大家使用16+版本

CANNOT RUN WITH NODE 14.16.0 Electron Packager requires Node >= 14.17.5. npm ERR! code ELIFECYCLE npm ERR! errno 1

至于怎么去动态切换node版本，这里推荐大家使用NVM，node版本控制工具，详细安装教程可以参考这篇文章。nvm安装和使用保姆级教程（详细）一、 nvm是什么： nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。二、卸载之前安装的node: …http://www.xbhp.cn/news/64284.html

注意：一定要将node的npm安装镜像源设置成淘宝镜像，否则会遇到npm下载不成功的问题。

第二步：当你安装依赖包成功之后，我们对打包项目进行配置。

首先修改vue.config.js文件，

module.exports = { publicPath: './', // vue-cli3项目如果有该项配置，则将值修改为‘./’, 没有则添加 assetsPublicPath: './', // vue-cli2项目使用该配置项 }

然后npm run build进行打包，将打包完成后的dist包直接拖入electron-quick-start 项目根目录下，如图

第三步：对electron-quick-start 进行相关操作

首先删除该项目下的index.html文件，并且对main.js内容进行修改：

# main.js mainWindow.loadFile('index.html') // 原文件 mainWindow.loadFile('./dist/index.html') // 替换原文件

然后，安装打包.exe所需要的依赖electron-packager、electron，执行如下命令，

npm i electron-packager --save-dev 或 npm i electron-packager -D npm i electron --save-dev 或 npm i electron -D

注意：很多人在安装依赖包的时候会遇到安装不成功的问题，这是由于镜像源问题，如果你也遇到了请先运行如下命令：

// 如果本地全局的镜像源已经是淘宝镜像，只需执行第二条命令 npm config set registry https://registry.npm.taobao.org/ npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

成功之后，再对项目package.json进行相应修改：

"scripts": { "start": "electron .", "packager": "electron-packager ./ Vite App --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite" }, // 如果不需要自动匹配dist文件夹下的应用图标使用该内容 "electron-packager ./ Vite App --platform=win32 --arch=x64 --overwrite" Vite App // 这个位置是设置打包后的.exe文件名，可以自定义进行替换

最后，执行npm run packager命令就可以完成打包了，执行完之后就可以在如图目录下找到.exe文件了！

问题来了

打包问题是解决了，但是打包之后的.exe文件，打开之后无法发送网络请求，并且请求是以file:///api/login开头的，但是本地代理服务一切正常。

原因：

是由于对electron-quick-start项目的main.js（入口文件）中设置了win.loadFile访问了本地index.html文件导致。

function createWindow () { // Create the browser window. Menu.setApplicationMenu(null) // 去掉默认菜单列表 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), webSecurity: false, // 允许跨域 } }) // Load a remote URL mainWindow.loadURL('http://192.168.0.241:9999') // and load the index.html of the app. mainWindow.loadFile('./dist/index.html') // Open the DevTools. mainWindow.webContents.openDevTools() // 打开调试工具 }

看了electron官网，也试了很多网上的很多方法，最终亲测了两种方法：

方法一：

在项目打包之前直接将axios实例中的baseUrl写成需要的服务域名，如下：

const service = axios.create({ baseURL: 'https://xxx.xxx.net' + apiBaseUrl, timeout: 15000 // 请求超时时间 })

方法二：

将服务器地址直接注入到vue原型上，如下：

# 这样写也是为了避免影响本地服务代理 Vue.prototype.$api = process.env.NODE_ENV === 'development' ? "/api" : "http://xxx.xxx.net/api"; # 然后修改axios实例 const service = axios.create({ baseURL: this.$api, timeout: 15000 // 请求超时时间 })

其实上面两种方法如出一辙，只是第二种方法考虑的场景比较全，更加灵活一些。

再次发现问题

经过上面的操作后，再次打包，服务问题是解决了，但是新的问题又来了。在打开.exe文件后，项目路由无法跳转。

经调研，在electron打包后的文件中是不支持history路由模式的，只支持hash路由模式。

所以，修改项目路由模式，如下：

const router = new Router({ mode: 'hash', // history || hash })

到这里，才算真正完成了vue项目打包成.exe所有流程。

总结

首先，感谢小伙伴能够阅读到这里，如果文章中发现有异议的地方及时评论，我及时修正，希望能够帮助到遇到同样问题的小伙伴，点个赞呗

【本文地址】

公司简介

联系我们