Codes►前端

02 electron打包

02 electron打包

相关文件

1
2
3
4
5
6
7
├── dist                   vite&vite-electron打包的vue3&electron项目
├── electron               electron代码
│   └── index.js
├── release                electron-builder打包的dist
├── electron-builder.json5 electron-builder的配置文件
├── package.json
└── vite.config.js

安装electron-builder

1
npm install electron-builder -D

electron-builder.json5

1
2
3
4
5
6
7
8
9
10
{
    appId:"com.lovi.electron",
    productName:"eva", //项目名称
    directories:{
        output:"release/${version}" //package.json的version
    },
    files:[
        "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
25
26
27
28
29
{
  "name": "eva",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build && electron-builder -mwl",
    "build:linux": "vite build && electron-builder --linux tar.xz",
    "build:win32": "vite build && electron-builder --windows nsis:ia32",
    "build:win64": "vite build && electron-builder --windows nsis:x64",
    "build:mac": "vite build && electron-builder --mac",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.3.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "electron": "^30.0.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "electron-builder": "^25.1.8",
    "vite": "^6.0.11",
    "vite-plugin-electron": "^0.29.0",
    "vite-plugin-vue-devtools": "^7.7.0"
  }
}

在package.json 文件中添加打包脚本，不同客户端打包脚本不一样，同时需要在对应环境打包，运行脚本时需要注意网络环境以及管理员权限。

electron/index. 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
import {
    app,
    BrowserWindow
} from 'electron'
import path from 'node:path'
import {fileURLToPath} from "node:url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const createMainWindow = function () {
    const win = new BrowserWindow({
        title:"title666",
        width:800,
        height:600,
        webPreferences: {
        }
    })
    //开发环境和真实环境路径区别
    if(process.env.NODE_ENV === 'development'){
        win.loadURL(process.env['VITE_DEV_SERVER_URL'])
    }else{
        win.loadFile(path.join(__dirname,"./index.html"))
    }
}
app.whenReady().then(res=>{
    createMainWindow()
})

asar

静态资源，前端代码通过 asar 加密，真实环境文件操作需要注意

不同路径