将Vue项目打包为Windows应用（.exe）

1.Vue项目打包为桌面应用 采用Electron

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

第一步: 进入Electron官方文档 https://www.electronjs.org/docs
第二步: 把electron的官方例子扒下来，下面简称old，留着待用

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

如下图所示

image.png

第三步: 进入我们自己的项目（下面简称new）如图所示

image.png

那么需要我们在根目录下手动创建一个文件vue.config.js 然后添加如下代码

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
}

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

如下图所示

image.png

第五步: 进入刚才下载的old项目，删除项目根目录下的 index.html 文件
第六步: 在old项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html

module.exports = {
      // main.js 原始内容 
      mainWindow.loadFile('index.html') 
      // 修改后的内容 
      mainWindow.loadFile('./dist/index.html') 
}

第七步: 将new项目中打包后的dist文件夹复制到old根目录

image.png

第八步: 在old项目中检查 package.json文件,正常情况下，运行下列指令即可进行打包效果预览

image.png

npm install 
npm run start 

如下图所示

image.png

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

npm install electron-packager --save-dev 

如图所示

image.png

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

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite" 

如图所示
[图片上传中...(image.png-3bb5d6-1623205084952-0)]

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

npm run packager 

如图所示

image.png

第十二步 设置无菜单
在main.js中 加入

electron.Menu.setApplicationMenu(null);

如图所示

1623206912(1).jpg

第十三步 设置无边框

还是同样的在createWindow 函数中，加入以下

image.png

**第十四步 重新打包exe （删除掉原来打包后生成的文件夹） **

npm run packager