学习记录_0922

使用elector把vue打包exe

提供两种方法 原理是相同的 第一种比较简单的：

方法一

1. 新建文件夹 在当前文件夹中打开cmd

2. npm init初始化项目，会生成一个package.json文件
   

3. npm install electron --save-dev安装electron

4. npm install electron-packager --save-dev
   

5. 在vue项目中执行npm run build打包生成dist文件夹 将该文件夹复制到上面的文件夹中
   
   

6. 打开package.json文件 原文件应该是：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

添加一行：

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "packager": "electron-packager . TDS --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=0.0.1 --overwrite to force"
  },

7. 执行npm run packager即可
   
   
   方法二

方法二与方法一基本类似 只不过方法二是利用官方文档的demo

1. 新建文件夹 在当前文件夹克隆项目地址git clone https://github.com/electron/electron-quick-start
2. cd 进入 electron-quick-start 文件夹 打开cmd npm install 添加依赖
3. 将之前打包好的dist放入当前文件夹
   
4. 这里要多一步修改 main.js 文件

mainWindow.loadFile('index.html')

改为

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

剩下的步骤就和方法一的 4 6 7一样操作即可