vue项目打包exe

准备工作

• 安装vue

  npm install -g @vue/cli
  npm install -g @vue/cli-init
  

• 创建项目vue

  vue init webpack my-vue-project
  

• 安装electron

  npm install -g electron
  

• 安装electron打包工具

  npm install -g electron-packager
  

打包EXE

1. my-vue-project：找到config/index.js文件；修改 assetsPublicPath的路径；文件中dev和build有两处使用到，请注意修改build处

   build: {
    ...
    assetsPublicPath: './',
   }
   

2. my-vue-project：打包项目，生存文件夹dist

   npm run build
   

3. electron：将dist文件夹放在根目录，修改main.js文件，删除index.html文件

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

4. electron：执行命令运行查看运行效果

   npm run start
   

   此时应该可以看到vue项目变成了exe文件的形式在运行

5. electron：下载打包所需的依赖

   npm install electron-packager --save-dev
   

6. electron：打开package.json，在scripts中添加打包命令

   "scripts": { 
    "start": "electron .", 
    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
   }
   

   如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容为，icon的路径自己调整下，更多配置内容请查阅文档：

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

7. electron：打包项目

   npm run packager
   

   到此，就生成了EXE的可执行文件，但是是一个文件夹，需要进行整个文件夹的压缩封装

生成EXE安装程序

InnoSetup下载、安装、打包

开源Inno Setup官网下载、安装、打包教程（官网安装向导中文语言包） - 奔跑的简单 - 博客园 (cnblogs.com)