将vue项目打包成exe文件

1.从electron官网拉取代码

gitclone https://github.com/electron/electron-quick-start

npm install (yarn install)

npm runstart

2.运行项目成功后修改自己项目的vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况

module.exports= {

publicPath: './',

}

3.在electron-quick-start项目中，下载打包需要的依赖 electron-packager

npm install electron-packager --save-dev

此处会出现安装不上依赖的情况，建议反复尝试

4.在electron-quick-start项目中找到入口文件 main.js，修改打包的文件路径为我们的index.html

// main.js 原始内容

mainWindow.loadFile('index.html')

// 修改后的内容

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

5.在electron-quick-start项目中，进入 package.json ，在 scripts 中添加 packager指令，如下所示：

"scripts":{

"start":"electron .",

"packager": "electron-packager ./ App --icon=./favicon.ico--out=./app--asar--app-version=1.0.0 --platform=win32 --arch=x64 --overwrite"

}

标红的为exe的名称，标蓝的修改exe图标

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

npm run packager