2.安装和配置 Electron

-- 未经授权禁止转载 --

项目下配置 .npmrc 文件 (electron_mirror 是 Electron 的镜像源)

electron_mirror=https://npmmirror.com/mirrors/electron/

注

虽然之前通过 npm config set registry https://registry.npmmirror.com/

已全局配置了淘宝镜像源 (位置: C:\Users\David\.npmrc),

但某些大型包(如: electron)仍会通过默认的官方源下载,所以需要配置对应镜像源

安装 electron

npm i electron -D

注

-D 表示作为仅在开发时需要的依赖(devDependencies)安装到项目中,

而不是项目运行时需要的依赖(dependencies)

安装 vite-plugin-electron

npm i vite-plugin-electron -D

注

vite-plugin-electron 是使用 vite 构建 electron 的插件,

会在构建过程中将 .ts 文件转换为 .js 文件

配置 vite.config.js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron/simple'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

vue(),

electron({

main: {

entry: 'electron/main.js',

preload: {

input: 'electron/preload.mjs',

}),

})

electron/main.js

import { app, BrowserWindow } from "electron"

import url from 'url'

import path from 'path'

let __filename = url.fileURLToPath(import.meta.url)

let __dirname = path.dirname(__filename)

//创建窗口

const createWindow = () => {

const mainWindow = new BrowserWindow({

width: 1000, //设置窗口宽度(单位:像素)

height: 600, //设置窗口高度

icon: "electron/resource/images/code.ico", //设置窗口图标

autoHideMenuBar:true, //隐藏菜单栏

webPreferences: { //网页偏好设置

nodeIntegration: true, //允许在渲染进程中直接使用 Node.js API

contextIsolation: true, //启用上下文隔 (提高安全性)

preload: path.resolve(__dirname,"preload.mjs"), //预加载脚本

}

})

//mainWindow.loadURL("http://localhost:5173")

//VITE_DEV_SERVER_URL 是开发服务器的 url, 只在开发环境中存在

mainWindow.loadURL(process.env['VITE_DEV_SERVER_URL'])

}

//当应用准备就绪后创建窗口

app.whenReady().then(() => {

createWindow()

})

electron/preload.mjs

console.log("preload.mjs")

运行项目

npm run dev

注

dist-electron 是由 vite-plugin-electron 生成的一个目录,

包含了 electron 编译后的主进程文件和预加载脚本

报错

Unable to find Electron app at D:\workspace\electron\demo

解决方法

配置 package.json 的 main 属性

{

"name": "demo",

"private": true,

"version": "0.0.0",

"type": "module",

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

"scripts": {

"dev": "chcp 65001 && vite",

"build": "vite build",

"preview": "vite preview"

"dependencies": {

"vue": "^3.5.10"

"devDependencies": {

"@vitejs/plugin-vue": "^5.1.4",

"electron": "^32.2.0",

"vite": "^5.4.8",

"vite-plugin-electron": "^0.28.8"

}

注

"main": "dist-electron/main.js"

主进程入口文件

"dev": "chcp 65001 && vite"

chcp(Change Code Page) 用于改变活动控制台窗口的代码页,

65001 是 UTF-8 编码的代码页编号

解决 CSP 警告 index.html