如何从零开始搭建一套Electron+Vue3+Vite2+Ts的桌面客户端开发框架
theme: channing-cyan
一、前言⚡️
☕️最近接到开发
Electron+Vue3
的需求,由于对于Electron
的开发并不是十分的熟悉,所以决定自己从头搭建一套开发框架,Vue部分使用Vue3+Vite2+Ts+Pinia+Vue-Router4+Axios+Element-Plus
✔️进行搭建,由于本人日常使用element-admin
、element-plus-admin
等后台框架进行开发,深受影响,因此Vue部分的结构及风格与其会比较像,可能常使用这套工具的小伙伴会很熟悉.Electron部分使用Electron21版本进行搭建,采用electron-bulider进行打包。☄️本文详细讲解了从初始化项目、搭建
Vite2+Vue3
框架、集成Electron
、最后完成打包的思路以及代码,包括一些全局主题
等方案的探讨,持久化缓存
的使用等,但还是希望能够真正帮助到大家,能够根据步骤搭建起一套开发工具,同时在Electron开发或者是打包过程中确实遇到了许多问题,通过很多次的搜索,我在文章后半部分详细说明了一些打包遇到的问题及解决方法,希望能有用❤️。⭐本文从零开始搭建,写了近万字,内容较多,大家可以选择性查看,如果希望查看Vue3部分的搭建请查看前半部分,如果希望查看Electron部分的搭建请查看后半部分。此外该项目主要使用了相关技术比较新的版本,如果有查看代码的同学请确保Node版本在16以上。
⭐️github地址:Vue3-Electron21-Vite2
⭐️gitee地址:Vue3-Electron21-Vite2
1、项目思路及目录结构
1.1 目录结构
✨我们先来预览一下项目的目录结构,我们将
electron
的主进程文件放在src
下的electrin-main
文件夹中,将vue
项目的页面路由等文件放在render
中,同时dist
为vite
打包后文件,dist_electron
为electron
打包后文件。
1.2 整体思路
✨该框架目前只搭建了三个窗口,我们希望客户端点击客户端过后,先弹出加载界面窗口,可以进行读取文件配置进度等操作,最重要的是可以获取我们的缓存,判断用户的登录是否是生效状态,然后决定展示登录窗口,还是主界面窗口。文件目录为三个窗口,分别对应主界面,登录,加载页面,我们electron的loadrUrl采用多窗口的Hash路由模式对应配置,因此我们的路由文件也只有三个大模块,LayOut是我们主页面的组件,跟后台系统一样,所有的主界面下的路由菜单页面都将在LayOut中渲染,而我们三个窗口也分别对应这三个路由
export const constantRouterMap: (RouteRecordRaw | RouterCustorm)[] = [
{
path: '/load',
name: 'Load',
hidden: true,
component: () => import('@/render/views/load/index.vue'),
},
{
path: '/',
name: 'Index',
component: LayOut,
children:[
{
path: '/',
name: 'Welcome',
meta: { title: '首页' },
component: () => import('@/render/views/home/index.vue'),
},
{
path: '/news',
name: 'News',
meta: { title: '新闻' },
component: () => import('@/render/views/news/index.vue'),
}
]
},
{
path: '/login',
name: 'Login',
hidden: true,
component: () => import('@/render/views/login/index.vue'),
}
]
2、该项目主要用到的技术栈:
| 主要技术栈及版本 | 版本 |
| --------- | --- |
|electron| ^21.3.0 |
|vite| ^3.2.3|
|vue| ^3.2.41 |
|vue-router|^4.1.6 |
|pinia| ^2.0.26 |
|axios| ^1.2.0 |
|element-plus| ^2.2.22 |
|sass |^1.56.1 |
| 部分插件 | 作用 | | --------- | --- | |web-storage-cache| 持久化存储 | |nodemon| electron窗口热更新 | |electron-is-dev| 开发生产环境判断| |electron-window-state|窗口状态的保持 | |-- |--| |-- |--| |-- |--| |-- |--|
二、搭建Vue3开发框架
使用
Vue3+Vite2+Ts+Pinia+Vue-Router4+Axios+Element-Plus
✔️进行搭建,该章节将会带领大家从零搭建一套Vue3开发框架,由于本文内容过多,有些部分会简略介绍,详细介绍请查看另外一篇文章✈️:Vue3+Ts+Vite2+Pinia 搭建开发脚手架
1、始化Vite项目
1.1 新建vite2+Ts+vue3项目
npm init vite ✅
输入自定义项目名称,同时我们本项目选择Vue+TypeScript进行开发。按照流程配置后我们成功启动了vite页面。
1.2 配置路径别名及自动补全路径
(1)配置路径别名
路径别名即@
可以在vite.config.js的resolve
中配置
```
import { defineConfig,loadEnv} from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' const root = process.cwd()
function pathResolve(dir: string) { return resolve(root, '.', dir) }
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig=>{
return {
plugins: [
vue(),
],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
alias: [
{
find: /@//,
replacement: ${pathResolve('src')}/
}
]
},
}
})
```
(2)自动补全路径配置
好多同学创建项目发现使用shiyongle@
符号,但是没有自动出现文件路径供我们选择,如果自己手写非常麻烦,本项目我们可以在tsconfig.json
中设置我们的补全路径,在tsconfig.json
中添加代码:
js
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
配置完成后就可以愉快的使用代码提示了:
2、配置Scss及全局主题样式方案
2.1安装sass及sass-loader
npm install sass sass-loader -D ✅
(1)在src下新建styles文件,styles下新建main.scss放置我们的全局样式
(2)新建var.scss放置全局变量,设置两套变量,为接下来配置全局主题样式做准备
(3)新建clear.scss进行全局样式的清除
可以自行查找相关css文件,这里就不再粘贴
(4)新建index.scss进行文件出口配置
在main.ts中引入index.scss,并且可以看到页面中的h1标题的样式已经生效。
```js import { createApp } from 'vue' import App from './App.vue' // 引入全局样式 import '@/styles/index.scss'
// 创建实例 const setupAll = async () => { const app = createApp(App) app.mount('#app') }
setupAll() ```
2.1 配置全局主题色⭐️
配置全局主题色的方案有非常多,包括
link标签动态引入
,CSS变量+类名切换
、CSS变量+动态property
、SCSS + mixin + 类名切换
等方案,根据我们的需求,由于本项目只进行暗黑、白亮模式的切换,所以选择CSS变量+类名切换
方案,同时参考vue-element-plus-admin主题色方案,我们预留CSS变量+动态property
方案进行局部主题色的修改。更全主题配置可以参考文章✈️'前端主题切换方案'
(1)CSS变量+类名切换
进行暗黑、白亮模式的切换
在上一部分的styles目录下我们提前新建了全局变量文件var.scss,设置了两套颜色,白亮主题以及暗黑主题下的颜色变量。
:root {
--theme-bg-color: #fff;
--btn-color: #409eff;
}
.dark{
--theme-bg-color:#293146;
--btn-color: #293146;
}
那么如何在页面中使用呢?只需要将变量名加入需要切换颜色的地方,在点击切换事件时,使用document.body.className
设置class名称,从而将变量值切换为相关class名称下的变量。
```
```
(2)CSS变量+动态property
进行局部颜色的切换
主要用来实现头部,菜单栏等颜色的切,可以的参考vue-element-plus-admin
的主题设置。在此处我们简单使用,代码与上部分CSS变量+类名切换
进行暗黑、白亮模式的切换的代码是一样的,只不过进行切换时,我们使用
如下方法,直接设置某个变量颜色,从而达到局部颜色切换的效果。
const handleChangeTheme=()=>{
document.documentElement.style.setProperty('--theme-bg-color','red')
// bol.value=!bol.value
// if(bol.value){
// document.body.className = 'dark';
// }else{
// document.body.className = '';
// }
}
3、配置状态管理库Pinia
☘️ Pinia 是 Vue3最新的以及最流行的状态管理库,它允许跨组件/页面共享状态。 如果熟悉 Composition API,可以认为他是一个简单的
export const state = reactive({})
,接下来我们就安装Pinia,具体使用方法可以参考本人之前写的一篇文章✈️:Vue3+Ts+Vite2+Pinia 搭建开发脚手架npm install pinia ✅
3.1 在src下新建store文件夹,store下新建index.ts,用来创建Pinia实例
``` import type { App } from 'vue' import { createPinia } from 'pinia'
const store = createPinia()
export const setupStore = (app: App
export { store } ```
3.2 在store文件夹下新建modules文件夹,用来管理模块,同时我们新建一个app.ts文件,用来存储app文件。
``` // stores/app.ts import { defineStore } from 'pinia' import {useCache} from "@/render/hooks/useCache";
const { wsCache } = useCache()
interface AppState { count:number } export const useAppStore = defineStore('app', { state: ():AppState => { return { count: 0 } }, actions: { increment() { this.count++ }, }, }) ```
3.3 main.ts中引入
``` import { createApp } from 'vue' import App from './App.vue' // 引入全局样式 import '@/render/styles/index.scss' // 引入状态管理 import { setupStore } from '@/render/store'
// 创建实例 const setupAll = async () => { const app = createApp(App) setupStore(app) app.mount('#app') }
setupAll() ```
3.4 页面中使用
js
import {useAppStore} from '@/render/store/modules/app'
const appStore = useAppStore()
appStore.increment()
const count=computed(()=>{
return appStore.count
})
4、使用WebStorageCache
进行持久化存储
4.1 什么是WebStorageCache
❓
WebStorageCache
对HTML5localStorage
和sessionStorage
进行了扩展,添加了超时时间,序列化方法。可以直接存储json对象,同时进行超时时间的设置⏰。 同时我们可以结合Pinia
进行数据的持久化存储。npm install web-storage-cache --save-dev ✅
4.2 封装WebStorageCache
为hooks
在src下新建hooks文件夹,用来放置我们后续封装的hooks,新建useCache.ts⛳️ ``` /* * 配置浏览器本地存储的方式,可直接存储对象数组。 /
import WebStorageCache from 'web-storage-cache'
type CacheType = 'sessionStorage' | 'localStorage'
export const useCache = (type: CacheType = 'sessionStorage') => { const wsCache: WebStorageCache = new WebStorageCache({ storage: type })
return { wsCache } } ```
4.3 使用WebStorageCache
js
import {useCache} from '@/render/hooks/useCache'
const {wsCache}=useCache('localStorage')
// 设置缓存,第三个参数对象配置的超时事件
wsCache.set('login',true,{exp : 100})
// 获取缓存
wsCache.get('login')
5、配置vue-router4
npm install vue-router@4 ✅
☘️src下新建router文件夹,同时新建index.ts文件,在views下新建login页面,方便调试路由,同时为了接下来适配electron,我们的路由模式需要使用hash模式,否则electron打包后很难通过路由引入对应的页面,并且我们需要配置路由的baseUrl,可以在根目录新建环境变量文件
.env.production
,.env.development
,
production下VITE_BASE_PATH='./'
development下VITE_BASE_PATH='/'
``` import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory} from 'vue-router' import type { App } from 'vue' type RouterCustorm={ hidden?:boolean } export const constantRouterMap: (RouteRecordRaw | RouterCustorm)[] = [ { path: '/login', name: 'Login', hidden: true, component: () => import('@/views/login/index.vue'), } ] const router = createRouter({ history: createWebHashHistory(import.meta.env.VITE_BASE_PATH), routes: constantRouterMap as RouteRecordRaw[], scrollBehavior: () => ({ left: 0, top: 0 }) })
export const setupRouter = (app: App在main.ts中使用⛳️:
import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式
import '@/render/styles/index.scss'
// 引入状态管理
import { setupStore } from '@/render/store'
// 引入路由
import {setupRouter} from "@/render/router";
// 创建实例 const setupAll = async () => { const app = createApp(App) setupStore(app) setupRouter(app) app.mount('#app') }
setupAll() ```
6、配置axios请求
此处请求配置参考了Element-Plus-Admin源码,其配置还是比较合理的,后续可以根据自己需求完善请求配置以及请求拦截等内容❤️
⚡️配置请求前,先完善环境变量
.env.production
,.env.development
。
production下: ``` // 环境 NODE_ENV=production
接口前缀
VITE_API_BASEPATH='pro'
打包路径
VITE_BASE_PATH='./'
development下:
// 环境
NODE_ENV=development
接口前缀
VITE_API_BASEPATH='dev'
打包路径
VITE_BASE_PATH='/' ```
npm install axios ✅
6.1新建请求配置文件
src下新建service目录,service下新建axios目录,新建config.js,比较值得注意的是打包生产环境接口前缀可以是完整线上地址,涉及到electron打包后请求地址问题。 ``` const config: { base_url: { dev: string pro: string } result_code: number | string default_headers: AxiosHeaders; request_timeout: number } = { /* * api请求基础路径 / base_url: { // 开发环境接口前缀 dev: '/api',
// 打包生产环境接口前缀
pro: 'http://xxxx/api',
},
/* * 接口成功返回状态码 / result_code: '0000',
/* * 接口请求超时时间 / request_timeout: 60000,
/* * 默认接口请求类型 * 可选值:application/x-www-form-urlencoded multipart/form-data / default_headers: 'application/json' }
export { config } ```
6.2 新建service.ts文件:
``` import axios, { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, AxiosError } from 'axios'
// @ts-ignore import qs from 'qs'
import { config } from './config'
import { ElMessage } from 'element-plus'
const { result_code, base_url } = config // export const PATH_URL ='/api' // @ts-ignore export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH] // 创建axios实例 const service: AxiosInstance = axios.create({ baseURL: PATH_URL, // api 的 base_url timeout: config.request_timeout // 请求超时时间 })
// request拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
if (
config.method === 'post' &&
(config.headers as AxiosRequestHeaders)['Content-Type'] ===
'application/x-www-form-urlencoded'
) {
config.data = qs.stringify(config.data)
}
// ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
// get参数编码
if (config.method === 'get' && config.params) {
let url = config.url as string
url += '?'
const keys = Object.keys(config.params)
for (const key of keys) {
if (config.params[key] !== void 0 && config.params[key] !== null) {
url += ${key}=${encodeURIComponent(config.params[key])}&
}
}
url = url.substring(0, url.length - 1)
config.params = {}
config.url = url
}
return config
},
(error: AxiosError) => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
(response: AxiosResponse
export { service } ```
6.3 新建index.ts对请求进行导出
``` import { service } from './service'
import { config } from './config'
const { default_headers } = config
const request = (option: any) => {
const { url, method, params, data, headersType, responseType } = option
return service({
url: url,
method,
params,
data,
responseType: responseType,
headers: {
'Content-Type': headersType || default_headers
}
})
}
export default {
get:
6.4 请求统一管理
在src下新建api文件夹对请求进行管理,新建login文件夹
新建index.ts:
import request from '@/render/service/axios'
import type { UserType } from './types'
export const loginApi = (data: Partial<UserType>): Promise<IResponse<UserType>> => {
return request.post({ url: '/auth/manage/login/pwd', data })
}
新建types.ts:
```
export type UserLoginType = {
username: string
password: string
}
export type UserType = { username: string password: string role: string roleId: string permissions: string | string[] } ```
6.5 vite.config.ts中配置代理
``` import { defineConfig,loadEnv} from 'vite' import type { UserConfig, ConfigEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path'
const root = process.cwd() function pathResolve(dir: string) { return resolve(root, '.', dir) }
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig=>{ let env = {} as any const isBuild = command === 'build' if (!isBuild) { env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root) } else { env = loadEnv(mode, root) } return { base: env.VITE_BASE_PATH, server: { port: 4000, proxy: { // 选项写法 '/api': { target: 'http://xxx/api', changeOrigin: true, rewrite: path => path.replace(/^/api/, '') } }, hmr: { overlay: false }, host: '0.0.0.0' }, plugins: [ vue() ], } }) ```
7、配置Element Plus与Element Plus Icons自动导入
⚙️Element Plus与Element Plus Icons自动导入主要是使用官网提供的插件进行vite的配置,但是Icons自动导入的使用方式有坑,下文有讲解,具体参照官网Element Plus
7.1 安装
npm install element-plus --save ✅
npm install @element-plus/icons-vue ✅
7.2 自动导入Element Plus
为了减少我们打包后包的体积,我们希望能够按需引入,但是每次页面需要手动导入很麻烦,因为我们使用自动导入,用起来与全局引入一样方便,但是需要使用额外的插件来导入要使用的组件
npm install -D unplugin-vue-components unplugin-auto-import ✅
7.3 自动导入icons
npm install -D unplugin-icons unplugin-auto-import ✅
注意自动导入icons的用法官网上并未给予示例,使用ep前缀自动注册,因此是个坑。
❗️ icons用法如下:
<i-ep-SemiSelect></i-ep-SemiSelect>
7.4 vite.config.ts中进行配置
``` import { defineConfig,loadEnv} from 'vite' import type { UserConfig, ConfigEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // 自动导入element-plus import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import Icons from 'unplugin-icons/vite' import IconsResolver from 'unplugin-icons/resolver'
const root = process.cwd() function pathResolve(dir: string) { return resolve(root, '.', dir) }
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig=>{ return { plugins: [ vue(), AutoImport({ // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style) // 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式) resolvers: [ ElementPlusResolver(), // Auto import icon components // 自动导入图标组件 IconsResolver({ prefix: 'Icon', }), ],
}),
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
// Auto register Element Plus components
// 自动导入 Element Plus 组件
ElementPlusResolver(),
],
}),
Icons({
autoInstall: true,
}),
]
}
}) ```
8、设置全局ts声明
根目录下新建types文件夹,新建global.d.ts,其中Window会在electron主进程与渲染进程通信中用到。 ``` export {} declare global { interface Window { electronAPI?: any;//全局变量名 } interface AxiosConfig { params?: any data?: any url?: string method?: AxiosMethod headersType?: string responseType?: AxiosResponseType }
interface IResponse<T = any> {
code: string
data: T extends any ? T : T & any
}
type AxiosHeaders =
| 'application/json'
| 'application/x-www-form-urlencoded'
| 'multipart/form-data'
} declare const window: any; ``` 同时需要将其配置到tsconfig.json中:
三、集成Electron开发环境
1、文件思路及集成Electron
首先我们将
electron
的主进程文件等都放在src下的electron-main
文件夹下,同时将我们之前写的vue
页面即渲染进程放到render
下,electron-main
下的main.js
文件主要进行主进程的配置,modules
文件下的两个文件夹管理主进程与渲染进程的通信,shortcut
进行快捷键的操作,tray
文件夹进行托盘的设置,until
放置读写文件工具,windows
管理不同的窗口,我们的需求是能够有一个初始化加载页面,一个登录页面,一个主页面,因此需要管理三个窗口。
安装electron 并进行命令配置:
npm i electron -D ✅
使用工具nodemon
配置热更新命令
npm i nodemon ✅
package.json中配置启动命令:
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.scss,.vue,.ts,.css",
同时我们可以使用工具concurrently
配置一键同时启动vite项目以及electron客户端命令
"scripts": {
"serve": "concurrently "npm run dev" "npm run start" ",
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.scss,.vue,.ts,.css",
},
2、main.js文件 ⭐
在这个文件中,我们初始化加载了loadWindows即初始化加载界面,同时初始化了我们的通信监听时间、快捷键即键盘事件、托盘,同时配置了我们的客户端聚焦失去焦点事件,方便我们聚焦时交互。
// @ts-ignore const {InitController} =require('./modules/controller/main.js') const {app,BrowserWindow, Tray, Menu} =require ('electron') const {createMainWindow}=require( './windows/mainWindows.js') const {createLoginWindow}=require( './windows/loginWindows.js') const {createLoadWindow}=require( './windows/loadWindows.js') const {initTray}=require('./tray/index.js') const {initShortCut,unInstallShortCut}=require('./shortcut/index') app.whenReady().then(()=>{ // createMainWindow(BrowserWindow) createLoadWindow(BrowserWindow) app.on('activate', () => { // 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) createLoginWindow(BrowserWindow) }) // 初始化监听事件 InitController(app) // 初始化托盘 initTray() // 初始化快捷键 initShortCut() }) // 除了 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() }) // 客户端聚焦 app.on('browser-window-focus',()=>{ // 初始化快捷键 initShortCut() console.log('browser-window-focus') }) // 客户端失去焦点 app.on('browser-window-blur',()=>{ // 初始化快捷键 unInstallShortCut() console.log('browser-window-blur') }) app.on('will-quit', () => { // 注销快捷键 unInstallShortCut() })
3、窗口的设置 ⭐️
思路:我们希望客户端点击过后,先弹出加载界面,可以进行读取文件配置进度等操作,最重要的是可以获取我们的缓存,判断用户的登录是否是生效状态,然后决定展示登录窗口,还是主界面窗口。文件目录为三个窗口,分别对应主界面,登录,加载页面。
3.1 config.js
config.js主要是配置窗口的打包环境的loadeUrl,开发环境与打包环境是不同的,在打包模块我会进行讲解。
js const ACHEME = "file"; const path=require('path') const LOAD_URL=`file://${path.join(__dirname, '../../../dist/index.html')}` module.exports={ ACHEME, LOAD_URL }
3.2 窗口插件使用
-
使用了
electron-window-state
进行窗口状态的记忆,比如用户进行了窗口的拖拽、尺寸大小调整,该插件可以帮助我们进行记忆,下次打开时是调整后的状态,使用方法: ```js //客户端尺寸位置记忆插件 const windowStateKeeper = require('electron-window-state'); const createLoadWindow=(BrowserWindow)=>{// 默认窗口尺寸 let mainWindowState = windowStateKeeper({ defaultWidth: 1000, defaultHeight: 800 }); const win = new BrowserWindow({ 'x': mainWindowState.x, 'y': mainWindowState.y, 'width': mainWindowState.width, 'height': mainWindowState.height }) // 管理客户端尺寸位置记忆插件 mainWindowState.manage(win);
}
``
- 使用了
electron-is-dev`来进行开发环境还是打包环境的判断。
js
const isDev = require('electron-is-dev')
const loadWinURL =
isDev? `http://localhost:4000/#/load`
: `${LOAD_URL}#load`;
3.3 完整的一个窗口基本配置(以加载窗口为例)⭕️
本界面我们进行了基础的页面配置以及使用了插件等进行了配置,除了上面两个插件的配置,我们还进行了frame设置,取消菜单边框,进行页面的自定义开发,webPreferences下设置preload,渲染器进程到主进程通信 定义预加载的界面js的路径,同时也设置了开发者工具、优雅打开界面防白屏等,并且loadURL的设置,在开发环境下是我们vite启动的地址加路由,生产环境稍后模块会讲解⏭。
`` // @ts-ignore const { LOAD_URL }=require('./config.js'); const path = require('path') const isDev = require('electron-is-dev') //客户端尺寸位置记忆插件 const windowStateKeeper = require('electron-window-state'); const url = require("url"); const loadWinURL = isDev?
http://localhost:4000/#/load:
${LOAD_URL}#load`;
const createLoadWindow=(BrowserWindow)=>{
// 默认窗口尺寸
let mainWindowState = windowStateKeeper({
defaultWidth: 1000,
defaultHeight: 800
});
const win = new BrowserWindow({
'x': mainWindowState.x,
'y': mainWindowState.y,
'width': mainWindowState.width,
'height': mainWindowState.height,
focusable:true,
show:false,
frame:false,
resizable:false,
webPreferences: {
webSecurity: false,
nodeIntegration: true,
contextIsolation: true,
// 渲染器进程到主进程通信 定义预加载的界面js
preload: path.resolve(__dirname, '../modules/preload/load.js')
}
})
// 加载页面地址 线上内网可切换地址
win.loadURL(`${loadWinURL}`)
// 管理客户端尺寸位置记忆插件
mainWindowState.manage(win);
// 开发者工具
win.webContents.openDevTools()
// 优雅打开界面
win.on('ready-to-show',()=>{
win.show()
})
}
module.exports={ createLoadWindow } ```
4、主进程与渲染进程的通信 ⭐
4.1 主进程监听渲染进程的消息
controller文件夹下的main.js主要设置主进程使用
ipcMain.handle
对渲染进程发来的请求进行监听处理,同时决定窗口的切换、判断登录或者展示首页、屏幕缩小 放大 关闭控制等操作。 ``` // @ts-ignore const {ipcMain,BrowserWindow,shell} =require('electron') const {createMainWindow} = require( '../../windows/mainWindows.js') const {createLoginWindow} = require("../../windows/loginWindows"); const settitle=()=>{ // @ts-ignore ipcMain.handle('on-settitle-event',(event,title)=>{ const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) win.setTitle(title) return '已收到' }) } // 浏览器打开页面 const openByBrowser=()=>{ // @ts-ignore ipcMain.handle('on-useOpenByBrowser-event',(event,url)=>{ shell.openExternal(url) }) } // 登录 展示首页 const setlogin=()=>{ // @ts-ignore ipcMain.handle('on-setlogin-event',(event,title)=>{ const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) win.close() createMainWindow(BrowserWindow) return '已经登录' }) } // 加载页判断登录或者展示首页 const isShowLogin=()=>{ // @ts-ignore ipcMain.handle('on-isshowlogin-event',(event,value)=>{ if(value){ setTimeout(()=>{ const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) win.close() createLoginWindow(BrowserWindow) },3000) }else{ const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) win.close() createMainWindow(BrowserWindow) }
// const webContents = event.sender
// const win = BrowserWindow.fromWebContents(webContents)
// win.close()
// createMainWindow(BrowserWindow)
return ''
})
} // 首页屏幕缩小 放大 关闭控制 const setScreen=()=>{ // @ts-ignore ipcMain.handle('on-setScreen-event',(event,value)=>{ console.log(value) const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) if(value==='miniScreen'){ win.minimize() }else if(value==='fullScreen'){ if(win.isMaximized()){ win.restore() }else{ win.maximize() } }else if(value==='closeScreen'){
}
return ''
})
} const InitController=(app)=>{ settitle(), openByBrowser(), setlogin(), isShowLogin(), setScreen() }
module.exports={ InitController,
} ```
4.2 渲染进程向主进程发送消息
由于我们有加载界面、登录界面、首页三个窗口,即三个渲染进程,因此我们设置三个渲染进程的方法文件,此处以首页向主进程发送页面缩小放大关闭等消息,利用
contextBridge
桥梁,将我们的方法挂载到window对象上。 ``` const { contextBridge, ipcRenderer } = require('electron') const setTitle=async (title)=>{ let result= await ipcRenderer.invoke('on-settitle-event', title) } // 浏览器打开页面 const openByBrowser=(url)=>{ ipcRenderer.invoke('on-useOpenByBrowser-event',url) } // 页面全屏 缩小 关闭 const setScreen=(value)=>{ ipcRenderer.invoke('on-setScreen-event',value) }
contextBridge.exposeInMainWorld('electronAPI', {
setTitle,
openByBrowser,
setScreen,
ipcRenderer: { ...ipcRenderer, on: ipcRenderer.on.bind(ipcRenderer) }
})
在vue页面中使用:
```
4.3 主进程向渲染进程发送消息(此处以键盘事件为例,触发页面不同操作)
在之前的文件夹中,我们将三个窗口分开管理,那么我们如何知道是哪个窗口的键盘事件执行了呢,我们需要在初始化三个窗口时,将其挂载到electron的全局对象global上,如以下 ``` const win = new BrowserWindow({ 'width': 100px, 'height': 200px, })
global.mainWindow=win
我们可以从global上获取窗口对象,同时使用webContents.send方法向渲染进程发送消息
globalShortcut.register('g', () => {
console.log('g')
if(global.mainWindow){
global.mainWindow.webContents.send('on-shortcut-event','g')
}
})
渲染进程使用
ipcRenderer.on进行消息监听。
import {ipcRenderer} from 'electron'
ipcRenderer.on('on-shortcut-event',(event:any,data:any)=>{
console.log(event,data)
})
``
正常来说,这样获取ipcRenderer直接进行监听看似非常简单,但是坑点在于vue页面中
import {ipcRenderer} from 'electron'`根本无法获取ipcRenderer❌,因此我查询了许多文档,发现有一种问题可以解决,就是我们利用渲染进程向主进程发送消息时在window身上挂载一个ipcRenderer,一定要bind一下on方法:
js
contextBridge.exposeInMainWorld('electronAPI', {
setTitle,
openByBrowser,
setScreen,
ipcRenderer: { ...ipcRenderer, on: ipcRenderer.on.bind(ipcRenderer) }
})
vue页面中:
js
if(window.electronAPI && window.electronAPI.ipcRenderer){
window.electronAPI?.ipcRenderer?.on('on-shortcut-event',(event:any,data:any)=>{
console.log(event,data)
})
}
5、键盘快捷键事件监听
在shortcut文件夹下新建index.js,注册键盘事件,globalShortcut.register第一个参数为快捷键组合,第二个参数为触发后的回调,综合上一步我们可以使用global.mainWindow.webContents.send
向渲染进程vue页面发消息,让其进行不同的操作,同时要记得注销快捷键⚠️。在主进程main.js中app失去焦点关闭等状态时进行注销。
```
const {app, globalShortcut } = require('electron')
const initShortCut=()=>{ // globalShortcut.register('CommandOrControl+X', () => { // console.log('CommandOrControl+X is pressed') // }) globalShortcut.register('g', () => { console.log('g') if(global.mainWindow){ global.mainWindow.webContents.send('on-shortcut-event','g') }
})
}
const unInstallShortCut=()=>{
// 注销快捷键
globalShortcut.unregister('CommandOrControl+X')
globalShortcut.unregister('g')
// 注销所有快捷键
globalShortcut.unregisterAll()
}
module.exports={
initShortCut,
unInstallShortCut
}
注销快捷键:
// 客户端失去焦点
app.on('browser-window-blur',()=>{
// 初始化快捷键
unInstallShortCut()
console.log('browser-window-blur')
})
app.on('will-quit', () => {
// 注销快捷键
unInstallShortCut()
})
```
6、托盘设置
什么是托盘,其实在windows中就是桌面底部任务栏右侧的小图标点击右键可以进行操作
如何实现呢❓
在tray文件夹下新建index.js,icon可以设置展示图标,setToolTip可以设置鼠标放上去的文字提示,contextMenu是右击出现的操作菜单,我们这里可以操作窗口的退出等等操作。
```js const { app, Menu, Tray,nativeImage } = require('electron') const path=require('path') let appIcon = null const initTray=()=>{ const iconPath = path.join(__dirname, '/icone.ico').replace('/\/g','\'); appIcon = new Tray(nativeImage.createFromPath(iconPath)) appIcon.setToolTip('This is my application.') const contextMenu = Menu.buildFromTemplate([ { label: '退出',type: 'radio', click:()=>{ app.quit() }}, { label: 'Item2', type: 'radio' } ])
// Make a change to the context menu
contextMenu.items[1].checked = false
// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
}
module.exports={ initTray } ```
7、可能会遇到的安全策略警告的关闭 在html中添加meta
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' ;">
四、打包 ⭕️
打包可能会遇到的问题包括打包后窗口
loadURL
的设置,打包的配置(包括名称、图标、包含文件等),多窗口下的页面路径与路由的配置,打包后网络请求的补全等问题,接下来我们就走一遍完整流程,并且对这些问题进行讲解❗️。先看一下我打包后的文件结构,dist是文件vite打包过后的文件,dist_electron是electron打包后的文件,里边包含安装exe文件登,dist_electron这个目录是在package.json中配置打包参数directories设置的。
1、使用electron-builder
进行打包
npm i electron-builder -D ✅
配置打包命令('app:dist'):
打包electron需要先打包vite,将vue文件打包完成后,再进行electron的打包。为了方便我自定了命令electron:dist,可以顺序执行vite打包、electron打包
"scripts": {
"serve": "concurrently "npm run dev" "npm run start" ",
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.scss,.vue,.ts,.css",
"app:dir": "electron-builder --dir",
"app:dist": "electron-builder",
"electron:dist": "vue-tsc && vite build && electron-builder"
},
2、package.json中配置打包参数
"build": {
"appId": "com.clound.app", // app名称
"productName": "clound", // 项目桌面名称 生成的安装文件名
"win": {
"icon": "./public/icon.ico", // 配置的安装后桌面上的图标
"artifactName": "${productName}.${ext}"
},
"directories": {
"output": "dist_electron" // 打包后输出文件夹名称
},
"files": ["./dist","./package.json","./src/electron-main"], // 打包时包含的文件 一定要包含dist 即vite打包后文件
"nsis": {
"oneClick": false, // 是否一键安装,不可更改目录等选项,默认为true
"allowElevation": true, // 是否允许权限提升。如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 是否允许更改安装路径
"createDesktopShortcut": true, // 是否创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"runAfterFinish": true, // 安装完成请求运行
"installerIcon": "./public/icon.ico", // 安装包图标
"uninstallerIcon": "./public/icon.ico", //卸载程序图标
"installerHeaderIcon": "./public/icon.ico", // 安装时头部图标
"shortcutName": "dclound" // 桌面图标名称
}
},
⚡️可能会遇到的问题:
配上我的ico资源路径以及vite路径配置,这里的ico资源配置路径可能会遇到问题,并且ico不能小于256*256 vite.config.js中的打包路径配置 ``` base: env.VITE_BASE_PATH,
production:VITE_BASE_PATH='./'
development:VITE_BASE_PATH='/' ```
3、electron多窗口loadURL
的处理
在开发环境下我们可以直接使用项目启动端口以及路由,但是打包后我们会有多个窗口,加载文件该加载哪里呢,路由又该如何使用呢?
3.1 设置文件路径
其实打包后我们窗口加载的地址应该是我们vite打包后的文件即dist所在文件位置,在我的config.js中已经定义好了vite打包后dist文件的路径,注意看dist文件相对于我们当前config.js的文职,决定了../../../dist/index.html
拼接的层级⚠️
const ACHEME = "file";
const path=require('path')
// const LOAD_URL = `${ACHEME}://${ __dirname}/index.html`;
const LOAD_URL=`file://${path.join(__dirname, '../../../dist/index.html')}`
module.exports={
ACHEME,
LOAD_URL
}
窗口中配置loadUrl(isDev是我们之前提到过的判断开发环境生产环境的工具):
``
const mainWinURL =
isDev ?
http://localhost:4000/#/:
${LOAD_URL}#`;
// 窗口实例 win.loadURL(mainWinURL)
```
3.2 多窗口打包后如何使用路由加载不同页面
先来看一下我们打包前后三个窗口的loadUrl,可以看到打包后我们可以使用文件路径拼接#路由方式找到页面,但是前提是我们Vue的路由设置必须是hash模式才会生效
// 加载窗口
const loadWinURL =
isDev? `http://localhost:4000/#/load`
: `${LOAD_URL}#load`;
// 主窗口
const mainWinURL =
isDev ? `http://localhost:4000/#/`
: `${LOAD_URL}#`;
// 登录窗口
const loginWinURL =
isDev? `http://localhost:4000/#/login`
: `${LOAD_URL}#login`;
同时要注意不同环境的baseUrl的设置,否则会出现白屏。
4、打包后白屏,source中查看 无法找到资源情况
首先要查看package.json中build打包参数 "files": ["./dist","./package.json","./src/electron-main"]
,是否包含了dist即vite打包后的文件,只有配置了包含,electron打包时才会一起加载打包。
其次如果使用了hash路由加载了不同页面要看baseUrl是否设置正确:
生产环境下 VITE_BASE_PATH='./'
const router = createRouter({
history: createWebHashHistory(import.meta.env.VITE_BASE_PATH),
routes: constantRouterMap as RouteRecordRaw[],
scrollBehavior: () => ({ left: 0, top: 0 })
})
5、打包后网络请求file://
,并不是想要的http等请求
打包后需要补全我们请求地址baseUrl,如生产环境下这样补全,可以查看上方vue框架搭建时我的配置。
const service: AxiosInstance = axios.create({
baseURL: 'http://XXXX/api', // api 的 base_url
timeout: config.request_timeout // 请求超时时间
})
使用https可能会遇到的安全策略警告的关闭 在html中我们之前的meta中新增http://* http://*
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' http://* http://*;">
五、写在最后 ✍️
这篇文章应该是目前我在掘金写的最长的一篇文章了,写了几个小时,接近万字,一开始只是想总结一下开发经验,但是想起自己在开发时遇到的坑点,希望能够详细的总结一篇文章,让后来的同学少开几个浏览器查问题❌, 本文讲解了整个框架的思路以及遇到的问题,但是仅仅依靠文章很多问题并不能详细阐述,建议大家可以拉一下代码看看,这样可能会更好的理解,同时如果有问题欢迎大家来讨论❤️。
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天,点击查看活动详情