vite2+vue3+electron13创建桌面应用

1、生成vite2+Vue3框架

npm init @vitejs/app vite-vue-win
cd vite-vue-win
npm install
npm run dev

2、为vue引入electron框架

在项目根目录创建 .npmrc文件，并添加如下内容

electron_mirror=http://cdn.npm.taobao.org/dist/electron/

3、安装所需的启动及打包模块

npm install electron --save-dev
npm install electron-builder --save-dev electron

4、在根目录添加electron目录，在新目录下创建preload.js和main.js

main.js内容

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, 'preload.js')
		}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('dist/index.html')
  // mainWindow.loadURL('http://localhost:3000/')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
	createWindow()

	app.on('activate', function () {
		// On macOS it's common to re-create a window in the app when the
		// dock icon is clicked and there are no other windows open.
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
})

preload.js内容

window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
		const element = document.getElementById(selector)
		if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
		replaceText(`${type}-version`, process.versions[type])
	}
})

5、为使Vite能够适应electron，更改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import { require } from 'yargs'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  // __dirname：    获得当前执行文件所在目录的完整目录名
  // __filename：   获得当前执行文件的带有完整绝对路径的文件名
  // process.cwd()：获得当前执行node命令时候的文件夹目录名 
  // ./：           文件所在目录
  
  // base: path.resolve(__dirname, './dist'),
  base: './',
  plugins: [vue()]
})

6、package.json的打包配置

 package.json下新增配置

"main": "./electron/main.js",

"build": {
		"appId": "com.zhong.app", //包名
		"productName": "打包项目名", //项目名称.exe
		"copyright": "zhong©2022", //版权信息
		"directories": {
			"output": "build" //打包输出文件夹
		},
		"nsis": {
			"oneClick": false, //是否一键安装
			"allowElevation": true, //允许请求提提升
			"allowToChangeInstallationDirectory": true, //允许修改安装目录
			"installerIcon": "./src/assets/favicon.ico", //安装图标
			"uninstallerIcon": "./src/assets/favicon.ico", //卸载图标
			"installerHeaderIcon": "./src/assets/favicon.ico", //安装时头部图标
			"createDesktopShortcut": true, //创建桌面图标
			"createStartMenuShortcut": true, //创建开始菜单图标
			"shortcutName": "el_test_shortcut" //图标名称
		},
		"win": {
			"icon": "./src/assets/favicon.ico", //图标，当前图标在根目录下，注意这里有两个坑
			"target": [{
				"target": "nsis", //利用nsis制作安装程序
				"arch": [
					"x64", //64位
					"ia32" //32位
				]
			}]
		}
	},

	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview",
		"electron:start": "vite build & electron .",
		"electron:build": "electron-builder"
	},

完整配置

{
	"name": "vite-vue-win",
	"private": true,
	"version": "1.0.0",
	"main": "./electron/main.js",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview",
		"electron:start": "vite build & electron .",
		"electron:build": "electron-builder"
	},
	"build": {
		"appId": "com.zhong.app",
		"productName": "打包项目名",
		"copyright": "zhong©2022",
		"directories": {
			"output": "build"
		},
		"nsis": {
			"oneClick": false,
			"allowElevation": true,
			"allowToChangeInstallationDirectory": true,
			"installerIcon": "./src/assets/favicon.ico",
			"uninstallerIcon": "./src/assets/favicon.ico",
			"installerHeaderIcon": "./src/assets/favicon.ico",
			"createDesktopShortcut": true,
			"createStartMenuShortcut": true,
			"shortcutName": "el_test_shortcut"
		},
		"win": {
			"icon": "./src/assets/favicon.ico",
			"target": [{
				"target": "nsis",
				"arch": [
					"x64",
					"ia32"
				]
			}]
		}
	},
	"dependencies": {
		"vue": "^3.2.25"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^2.3.1",
		"electron": "^18.2.0",
		"electron-builder": "^23.0.3",
		"vite": "^2.9.7"
	}
}