使用election将vue项目打包成exe

Vue项目打包

使用以下命令将vue项目打包dist

1
npm run build

执行该操作以后将在vue项目中生成dist文件夹，里面为打包后的文件。

安装配置electron

在dist文件夹下新建package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist" :  "electron-builder" 
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^25.3.0"
  }
}

新建main.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const {app, BrowserWindow} =require( 'electron' ); //引入electron
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

let  win;
let  windowConfig = {
   width:800,
   height:600
}; //窗口配置程序运行窗口的大小
function  createWindow(){
   win =  new  BrowserWindow(windowConfig);   //创建一个窗口
   win.loadFile(`index.html`);       // 在窗口内要展示的内容index.html 就是打包生成的index.html
   win.webContents.openDevTools();   // 开启调试工具
   win.on( 'close' ,() => {
     win =  null;  //回收BrowserWindow对象
   });
   win.on( 'resize' ,() => {
     win.reload();
   })
}
app.on( 'ready' ,createWindow);
app.on( 'window-all-closed' ,() => {
   app.quit();
});
app.on( 'activate' ,() => {
   if (win ==  null ){
     createWindow();
   }
});

安装electron

1
npm install electron

安装打包工具

1
2
3
npm install electron-builder

npm install electron-package

修改路径

修改index.html中的js、css的路径为相对路径。
如果css中存在图片同样修改为相对路径。

打包

执行以下命令进行打包

1
npm run dist

打包以后会生成dist文件夹，里面就是打包后的文件。