electron-build将vue项目打包成windows桌面端可执行程序

electron-build将vue项目打包成windows桌面端可执行程序

vue项目打包成静态资源

下载安装@vitejs/plugin-legacy

// 保证vue项目打包以后的资源点击就可查看的插件
npm i @vitejs/plugin-legacy

配置vite.config.js（此处用的是vite）

...
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
...

export default defineConfig({
  base: './',
  publicPath: './',
  plugins: [
    vue(),
    legacy({
      targets: ['ie>=11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
  ...
  ...
})

打包

npm run build

此时打包的vue项目可在资源管理器中直接点击index.html打开

配置安装electron

安装

npm i --save-dev electron
npm i electron-build -D

在主目录添加文件夹electron

添加文件main.js (frame参数可设置ture，展示/隐藏菜单栏。win.loadFile为你vue项目打包生成的入口文件)

import { app, BrowserWindow } from 'electron'


function createWindow() {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 1920,
    height: 1080,
    frame: false, // 设置为false以隐藏标题栏和状态栏
    webPreferences: {
      nodeIntegration: true,
      // contextIsolation: false
    }
  })

  // 加载应用的index.html
  win.loadFile('./dist/index.html')
}

app.whenReady().then(createWindow)

package.json编辑信息

{
	  "main": "electron/main.js",
	  "scripts": {
			...
		    "start": "electron-forge start",
		    "build:electron": "electron-builder",
		     "build:win64": "electron-builder --win --x64",
		     ...
	  },

	  "build": {
	    "productName": "name",
	    "appId": "com.example.name",
	    "directories": {
	      "output": "build"
	    },
	    "files": [
	      "dist/**/*",
	      "electron/main.js",
	      "node_modules/**/*",
	      "package.json"
	    ],
	    "win": {
	      "icon": "./dist/icon.png",
	      "target": [
	        {
	          "target": "nsis",
	          "arch": [
	            "x64",
	            "ia32"
	          ]
	        }
	      ]
	    },
	    "mac": {
	      "target": "dmg"
	    },
	    "linux": {
	      "target": [
	        "AppImage",
	        "deb"
	      ]
	    },
	    "nsis": {
	      "oneClick": false,
	      "allowElevation": true,
	      "allowToChangeInstallationDirectory": true,
	      "installerIcon": "./dist/icon.png",
	      "uninstallerIcon": "./dist/icon.png",
	      "installerHeaderIcon": "./dist/icon.png",
	      "createDesktopShortcut": true,
	      "createStartMenuShortcut": true,
	      "shortcutName": "testApp"
	    }
	}
		  ....
}

客户端测试

npm run start

客户端打包

!使用管理员身份进入PowerShell到项目根目录下执行：

npm run build:win64

可能遇到的问题1：icon尺寸太小

解决方案：跟换像素256*256以上的icon图片

image C:\******\dist\icon.png must be at least 256x256

可能遇到的问题2：build时会download下载github的资源包，由于访问不到所以异常。

解决方案：

手动下载github上的包。

在 C:\Users\【你的用户名】\AppData\Local\electron-builder\Cache 中找到winCodeSign和nsis如果没有则创建。

将资源包解压近里面，例如：

正常结果

正常结果如下载win-unpacked中存在【项目名】.exe的可执行文件，在资源管理器中点击执行（最好放置在全英文路径下）