配置好electron客户端代码

.env.development

@@ -1 +1 @@
-VITE_APP_PREFIX_URL=/api
+RENDERER_VITE_APP_PREFIX_URL=/api

.env.production

@@ -1 +1 @@
-VITE_APP_PREFIX_URL=/api
+RENDERER_VITE_APP_PREFIX_URL=/api

build/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>

build/notarize.js

@@ -0,0 +1,40 @@
+/** @format */
+
+const { notarize } = require('@electron/notarize');
+
+module.exports = async (context) => {
+	if (process.platform !== 'darwin') return;
+
+	console.log('aftersign hook triggered, start to notarize app.');
+
+	if (!process.env.CI) {
+		console.log(`skipping notarizing, not in CI.`);
+		return;
+	}
+
+	if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) {
+		console.warn(
+			'skipping notarizing, APPLE_ID and APPLE_ID_PASS env variables must be set.',
+		);
+		return;
+	}
+
+	const appId = 'com.electron.app';
+
+	const { appOutDir } = context;
+
+	const appName = context.packager.appInfo.productFilename;
+
+	try {
+		await notarize({
+			appBundleId: appId,
+			appPath: `${appOutDir}/${appName}.app`,
+			appleId: process.env.APPLE_ID,
+			appleIdPassword: process.env.APPLEIDPASS,
+		});
+	} catch (error) {
+		console.error(error);
+	}
+
+	console.log(`done notarizing ${appId}.`);
+};

client/main/index.ts

@@ -0,0 +1,72 @@
+/** @format */
+
+import { app, shell, BrowserWindow, screen } from 'electron';
+import { join } from 'path';
+import { electronApp, optimizer, is } from '@electron-toolkit/utils';
+import icon from './public/refrain.png?asset';
+
+function createWindow() {
+	const primaryDisplay = screen.getPrimaryDisplay();
+	const { width, height } = primaryDisplay.workAreaSize;
+
+	const mainWindow = new BrowserWindow({
+		x: 0,
+		y: 0,
+		width,
+		height,
+		show: true,
+		fullscreenable: true,
+		skipTaskbar: false,
+		autoHideMenuBar: true,
+		...(process.platform === 'linux' ? { icon } : { icon }),
+		webPreferences: {
+			preload: join(__dirname, '../preload/index.js'),
+			sandbox: false,
+		},
+	});
+
+	mainWindow.on('ready-to-show', () => {
+		mainWindow.show();
+	});
+
+	mainWindow.webContents.setWindowOpenHandler((details) => {
+		shell.openExternal(details.url);
+		return { action: 'deny' };
+	});
+
+	// HMR for renderer base on electron-vite cli.
+	// Load the remote URL for development or the local html file for production.
+	if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+		mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
+	} else {
+		mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
+	}
+}
+
+app.whenReady().then(() => {
+	electronApp.setAppUserModelId('com.electron');
+
+	// Default open or close DevTools by F12 in development
+	// and ignore CommandOrControl + R in production.
+	// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+	app.on('browser-window-created', (_, window) => {
+		optimizer.watchWindowShortcuts(window);
+	});
+
+	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', () => {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});

client/preload/index.d.ts

@@ -0,0 +1,10 @@
+/** @format */
+
+import { ElectronAPI } from '@electron-toolkit/preload';
+
+declare global {
+	interface Window {
+		electron: ElectronAPI;
+		api: unknown;
+	}
+}

client/preload/index.ts

@@ -0,0 +1,20 @@
+/** @format */
+
+import { contextBridge } from 'electron';
+import { electronAPI } from '@electron-toolkit/preload';
+
+const api = {};
+
+if (process.contextIsolated) {
+	try {
+		contextBridge.exposeInMainWorld('electron', electronAPI);
+		contextBridge.exposeInMainWorld('api', api);
+	} catch (error) {
+		console.error(error);
+	}
+} else {
+	// @ts-ignore (define in dts)
+	window.electron = electronAPI;
+	// @ts-ignore (define in dts)
+	window.api = api;
+}

electron-builder.yml

@@ -0,0 +1,48 @@
+# @format
+
+appId: com.electron.app
+productName: refrain-music
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!**/electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml,yarn.lock}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - client/main/public/**
+afterSign: build/notarize.js
+win:
+  icon: build/icon.png
+  executableName: refrain-music
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  icon: build/icon.png
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+  icon: build/icon.png
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates

package.json

@@ -1,9 +1,12 @@
 {
-	"name": "yuan-player",
+	"name": "refrain-music",
 	"version": "1.0.0",
+	"main": "./dist/main/index.js",
+	"license": "MIT",
+	"private": true,
 	"scripts": {
 		"rebuild:githooks": "npx simple-git-hooks",
-		"dev": "vite -c scripts/vite/vite.config.ts --host",
+		"dev": "vite -c scripts/vite/vite.config.ts",
 		"preview": "vite preview -c scripts/vite/vite.config.ts",
 		"optimize": "vite optimize -c scripts/vite/vite.config.ts",
 		"build": "vite build -c scripts/vite/vite.config.ts",
@@ -17,14 +20,24 @@
 		"prettier": "npm run prettier:write",
 		"prepare": "npm run rebuild:githooks",
 		"api": "cross-env PORT=3000 npx NeteaseCloudMusicApi",
-		"start": "npm-run-all -p api dev"
+		"start": "npm-run-all -p api dev",
+		"start:client": "npm-run-all -p api dev:client",
+		"preview:client": "electron-vite preview -c scripts/vite/electron.vite.config.ts",
+		"dev:client": "electron-vite dev -c scripts/vite/electron.vite.config.ts",
+		"build:client": "electron-vite build -c scripts/vite/electron.vite.config.ts",
+		"build:win": "npm run build:client && electron-builder --win --config",
+		"build:mac": "npm run build:client && electron-builder --mac --config",
+		"build:linux": "npm run build:client && electron-builder --linux --config",
+		"postinstall": "electron-builder install-app-deps",
+		"postuninstall": "electron-builder install-app-deps"
 	},
-	"license": "MIT",
-	"private": true,
 	"dependencies": {
+		"@electron-toolkit/preload": "^1.0.3",
+		"@electron-toolkit/utils": "^1.0.2",
 		"@vueuse/core": "^6.5.3",
 		"crypto-js": "^4.1.1",
 		"dexie": "^3.0.3",
+		"electron-updater": "^5.3.0",
 		"howler": "^2.2.3",
 		"js-cookie": "^3.0.0",
 		"naive-ui": "2.27.0",
@@ -35,21 +48,26 @@
 		"vue-router": "~4.0.10"
 	},
 	"devDependencies": {
-		"@rollup/plugin-image": "^3.0.1",
+		"@electron-toolkit/tsconfig": "^1.0.1",
+		"@electron/notarize": "^1.2.3",
+		"@rollup/plugin-image": "^3.0.2",
 		"@types/crypto-js": "^4.0.2",
 		"@types/howler": "^2.2.3",
 		"@types/js-cookie": "^2.2.7",
 		"@types/node": "^16.4.8",
 		"@typescript-eslint/eslint-plugin": "^4.29.1",
 		"@typescript-eslint/parser": "^4.29.1",
-		"@vitejs/plugin-vue": "^3.0.1",
-		"@vitejs/plugin-vue-jsx": "^2.0.0",
+		"@vitejs/plugin-vue": "^4.2.1",
+		"@vitejs/plugin-vue-jsx": "3.0.1",
 		"@vue/compiler-sfc": "^3.2.19",
 		"@vuedx/typecheck": "^0.7.4",
 		"@vuedx/typescript-plugin-vue": "^0.7.4",
 		"NeteaseCloudMusicApi": "^4.6.7",
 		"autoprefixer": "^10.3.1",
 		"cross-env": "^7.0.3",
+		"electron": "^24.2.0",
+		"electron-builder": "^23.6.0",
+		"electron-vite": "^1.0.22",
 		"eslint": "^7.32.0",
 		"eslint-plugin-vue": "^7.16.0",
 		"lint-staged": "^11.1.2",
@@ -61,10 +79,12 @@
 		"sass": "^1.42.1",
 		"simple-git-hooks": "^2.7.0",
 		"typescript": "^4.4.3",
-		"vite": "^3.0.4",
-		"vite-plugin-pwa": "^0.11.3",
-		"vite-svg-loader": "^2.2.0",
-		"workbox-core": "^6.3.0",
+		"vite": "^4.3.5",
+		"vite-plugin-pwa": "0.14.6",
+		"vite-svg-loader": "^4.0.0",
+		"workbox-build": "^6.5.4",
+		"workbox-core": "^6.5.4",
+		"workbox-window": "^6.5.4",
 		"yarn": "^1.22.11"
 	},
 	"simple-git-hooks": {

prettier.config.js

@@ -32,7 +32,6 @@ const conf = {
 	trailingComma: 'all',
 
 	insertPragma: true,
-
 	embeddedLanguageFormatting: 'off',
 
 	//对html等daima进行换行

scripts/vite/constant.ts

@@ -1,21 +1,11 @@
 /** @format */
 
-import proxyConfig from './proxy';
-import path from 'path';
-
-const extend = Object.assign;
-
-const pathResolve = (dir: string) => path.resolve(`${__dirname}`, '../', dir);
-
-const hostname = '127.0.0.1';
+const hostname = 'localhost';
 const port = 2021;
 
 const viteConstants: ViteConstant = {
-	pathResolve,
 	hostname,
 	port,
-	extend,
-	proxy: proxyConfig,
 };
 
 export default viteConstants;

scripts/vite/electron.vite.config.ts

@@ -0,0 +1,36 @@
+/** @format */
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
+import RenderViteConfig from './vite.config';
+import path from 'path';
+
+export default defineConfig({
+	main: {
+		publicDir: path.join(process.cwd(), 'client/main/public'),
+		build: {
+			watch: {},
+			outDir: 'dist/main',
+			rollupOptions: {
+				input: {
+					index: path.join(process.cwd(), 'client/main/index.ts'),
+				},
+			},
+			minify: true,
+		},
+		plugins: [externalizeDepsPlugin()],
+	},
+	preload: {
+		publicDir: path.join(process.cwd(), 'client/preload/public'),
+		build: {
+			outDir: 'dist/preload',
+			rollupOptions: {
+				watch: {},
+				input: {
+					index: path.join(process.cwd(), 'client/preload/index.ts'),
+				},
+			},
+			minify: true,
+		},
+		plugins: [externalizeDepsPlugin()],
+	},
+	renderer: RenderViteConfig,
+});