## 脚手架项目使用 [electron-vite](https://cn.electron-vite.org/) 脚手架搭建 ps:还有一个框架是 [electron-vite](https://electron-vite.github.io/) ，这个框架我发现与pixi库有冲突，无法使用，如果不用pixi也可以用这个脚手架。 **node 版本建议18+** ## ---------------------------------------------------------------------------------------- ## 运行live2D相关依赖 ### 1.pixi.js ```bash npm install pixi.js@6.5.10 // pixi 后面可能运行会报错，提示需要安装unsafe-eval // 需要注意pixi/unsafe-eval 需要安装与pixi一致的版本 npm install @pixi/unsafe-eval@6.5.10 ``` ### 2. [pixi-live2d-display](https://github.com/guansss/pixi-live2d-display) ```bash npm install pixi-live2d-display ``` ### 3. [live2D官方SDK](https://www.live2d.com/en/sdk/about/) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d2b702c87334a8a85b5694a0a7f724a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1207\&h=597\&s=191531\&e=png\&b=fef5f3) 如果需要兼容老版本模型需要引入[2.0版sdk](https://github.com/dylanNew/live2d/tree/master/webgl/Live2D/lib) #### 因为使用Vite,SDK引入不能使用import，需要在index.html 中使用script标签引入 #### 需要注意的是文件存放路径，否则打包后会找不到文件，这里笔者是在renderer文件夹下创建了public文件夹，将渲染进程需要使用的静态资源存放在里面。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b57eea511d4343ee87eb825f2cba7338~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=285\&h=143\&s=9697\&e=png\&b=28282a) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/617275bec4fe44a6903cf3c4145c5e19~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=605\&h=158\&s=24511\&e=png\&b=1e1e1e) ## ---------------------------------------------------------------------------------------- ## VUE 路由设置与Element-Plus安装 ```bash npm install vue-router npm install element-plus ``` 安装后新建相关文件夹与文件需要注意的是路由模式要使用**hash模式** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f9385e64d65465e970036f617d6e5e5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=298\&h=264\&s=15370\&e=png\&b=262627) **router/index.ts** ```typescript import { createRouter, createWebHashHistory, type RouteLocationNormalized, createWebHistory } from "vue-router"; import routes from "./routes"; const router = createRouter({ // hash路由模式 history: createWebHashHistory(), // History路由模式 // history: createWebHistory(), routes }); export interface toRouteType extends RouteLocationNormalized { meta: { title?: string; noCache?: boolean; }; } router.beforeEach((to: toRouteType, from, next) => { next(); }); router.afterEach(() => { }); export default router; ``` **router/routes.ts** ```typescript import Layout from "../layout/index.vue"; import type { RouteRecordRaw } from "vue-router"; const routes: Array = [ { path: "/", name: "root", component: Layout, redirect: "live2D", children: [ { path: "live2D", name: "live2D", component: () => import("../views/live2D/index.vue"), meta: { title: "live2D" } } ] } ]; export default routes; ``` **layout/index.vue** ```html ``` **App.vue** 加入router-view标签 ```html ``` **renderer渲染进程下的main.ts** 引入相关包 ```typescript import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from "./router/index"; import ElementPlus from 'element-plus'; import './assets/element.css'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; const app = createApp(App); app.use(router); app.use(ElementPlus,{locale:zhCn}); app.mount('#app') ``` **main主进程下的 main.ts** 跳转修改如下默认为跳转根目录，跟目录的redirect配置的页面，需要指定页面使用hash拼接路由与参数。参数在路由后加?xxx=xxx\&yyy=yyy ```typescript if (is.dev && process.env['ELECTRON_RENDERER_URL']) { await mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) // 跳转指定页面 // await recordsListWindow.loadURL(process.env['ELECTRON_RENDERER_URL']+`/#/xxxx`); } else { await mainWindow.loadFile(join(__dirname, '../renderer/index.html')) // 跳转指定页面 // await recordsListWindow.loadFile(join(__dirname, '../renderer/index.html'),{hash:'/xxxx'}); } ``` ## 测试使用 #### 在renderer/views文件夹下创建 views/live2D/index.vue，设置模型容器 ```html ``` #### 主进程中的main.ts文件创建主窗口 ```typescript // 创建主窗体参数做如下更改 const { width,height} = screen.getPrimaryDisplay().workAreaSize; const mainWindow = new BrowserWindow({ x: width - 150, y: height - 300, width: 100, height: 300, show: false, maximizable: false, minimizable: false, resizable: false, fullscreenable: false, frame: false, transparent: true, hasShadow: false, alwaysOnTop: true, titleBarStyle: 'customButtonsOnHover', autoHideMenuBar: true, ...(process.platform === 'linux' ? { icon } : {}), webPreferences: { preload: join(__dirname, '../preload/index.js'), sandbox: false, nodeIntegration: true, webSecurity:false // 禁用同源策略 } }) ``` ## ---------------------------------------------------------------------------------------- ## 测试效果-运行/打包 ```typescript // 运行 npm run dev // 打包需要管理员权限 // 打包后在根目录的 dist 下有安装包和安装后的文件夹 npm run build:win ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc2b91c9def54a2092d665cdc7d142c5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=214\&h=307\&s=20229\&e=png\&b=1e1e1e) #### 具体模型交互使用相关[API参数](https://github.com/guansss/pixi-live2d-display/blob/master/README.zh.md)进行设置即可 ## ---------------------------------------------------------------------------------------- ## 配置vue页面demo #### 1.views文件夹下新建demo/index.vue #### 2.router.ts新增相关路由 ```typescript { path: "demo", name: "demo", component: () => import("../views/demo/index.vue"), meta: { title: "demo" } }, ``` #### 3. 在主进程下的main.ts新增托盘菜单配置做测试 ```typescript // 系统托盘图标目录 const appTray = new Tray(icon); const menuTemplate = [ { id: '1', label: '查看demo', click: async function () { let recordsListWindow = new BrowserWindow({ width: 1000, height: 600, title: 'demo', autoHideMenuBar: true, webPreferences: { nodeIntegration: true } }); if (is.dev && process.env['ELECTRON_RENDERER_URL']) { await recordsListWindow.loadURL(process.env['ELECTRON_RENDERER_URL']+`/#/demo`); } else { await recordsListWindow.loadFile(join(__dirname, '../renderer/index.html'),{hash:'/demo'}); } recordsListWindow.setTitle('demo'); //打开开发者工具 if(is.dev) recordsListWindow.webContents.openDevTools({mode:'detach'}); } }, { id: '2', label: '退出', click: function(){ app.quit(); } } ]; // 图标的上下文菜单 const contextMenu = Menu.buildFromTemplate(menuTemplate); // 设置此托盘图标的悬停提示内容 appTray.setToolTip('demo'); appTray.setTitle('demo'); // 设置此图标的上下文菜单 appTray.setContextMenu(contextMenu); ``` #### 配置完成后托盘图标右键即可出现菜单，点击后会创建新窗口显示对应路由下的vue文件 ## ---------------------------------------------------------------------------------------- ## 开发中可能出现的报错 #### 1. tsc 代码检测报错在package.json 中把相关脚本的tsc检测关闭 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/157dad4730ff41858658c8e012de6a66~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=765\&h=311\&s=54128\&e=png\&b=1e1e1e) ## ---------------------------------------------------------------------------------------- #### 2.打包后静态资源无法访问检查是否使用绝对路径，最好的方法是将渲染进程的静态资源都放在public文件夹下 [渲染进程资源处理](https://cn.vitejs.dev/guide/assets) [主进程资源处理](https://cn.electron-vite.org/guide/assets) ## ---------------------------------------------------------------------------------------- #### 3.模型拖拽与鼠标事件冲突有时候会遇到既要模型能拖动，也要能右键出现菜单的需求。有两种解决方法：（1）：设置区域拖动，只有部分区域能触发拖动能拖动的元素设置：-webkit-app-region: drag; 要触发鼠标事件的元素设置：-webkit-app-region: no-drag; （2）：不用-webkit-app-region: drag;属性来拖动具体代码如下： ##### 前端页面做事件监听 ```typescript const moveIng = ref(false); const startX = ref(0); const startY = ref(0); const lastWidth = ref(0); const lastHeight = ref(0); function move (event:any){ if (!moveIng.value) return; const x:any = window.screenX + event.clientX - startX.value const y:any = window.screenY + event.clientY - startY.value // 调用主进程函数 window.api.moveBounds(parseInt(x), parseInt(y), lastWidth.value, lastHeight.value); } window.addEventListener('mousedown',(event:any)=>{ event.preventDefault(); moveIng.value = true; startX.value = parseInt(event.clientX); startY.value = parseInt(event.clientY); lastWidth.value = window.outerWidth; lastHeight.value = window.outerHeight; document.addEventListener('mousemove', move); }); window.addEventListener('mouseup',(event:any)=>{ event.preventDefault(); if (!moveIng.value) return document.removeEventListener('mousemove', move) moveIng.value = false }); window.addEventListener('contextmenu',()=>{ if (!moveIng.value) return document.removeEventListener('mousemove', move) moveIng.value = false }); ``` #### 中间层 preload.ts ```typescript moveBounds: (x:any,y:any,width:any,height:any) => { ipcRenderer.send('moveBounds',x,y,width,height); } ``` #### 主进程 main.ts ```typescript // 监听渲染线程窗体移动同时改变主进程位置 ipcMain.on('moveBounds', (event:any, x:any, y:any, width:any, height:any) => { if(event.frameId!=mainWindow.webContents.id) return; let newBounds = { x: parseInt(x), y: parseInt(y), width: parseInt(width), height: parseInt(height), } mainWindow.setBounds(newBounds) }) ``` ## ---------------------------------------------------------------------------------------- #### 4.右键自定义菜单 ```typescript // 给主窗口添加右键菜单 const contextRightMenu = Menu.buildFromTemplate(menuTemplate); mainWindow.webContents.on("context-menu", (e:any) => { e.preventDefault(); contextRightMenu.popup(); }); ``` ## ---------------------------------------------------------------------------------------- #### 5.在使用本地静态图片资源时报错 Refused to load the script xxxxxx because it violates the following Content Security Policy directive:"script-src 'self' xxxxxxxxxxxxx" **需要在index.html 中修改meta标签** ```html ``` ## ---------------------------------------------------------------------------------------- #### 6.修改打包图标 **安装 electron-icon-builder 包** **配置package.json,新增脚本，修改input路径为自己项目的路径** ```bash "build-icon": "electron-icon-builder --input=./resources/icon.png --output=build --flatten" ``` 运行脚本即可生成 ```bash npm run build-icon ``` ## ---------------------------------------------------------------------------------------- #### 7.windows 7 无法启动报错无法定位程字输入点 DiscardVirtualMemory 于动态链接车KERNEL32.dI 上. ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/91728a1844ce4e84ab852a46179283e5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgVHdlbHZlNjE5:q75.awebp?rk3s=f64ab15b&x-expires=1765509077&x-signature=l22G0PY9IOJ4%2FiWlPUWteRV0W9w%3D) 由于electron 22 以上就不再支持win7 这里需要手动降级electron版本，electron-builder也需要同步降级至对应版本建议安装版本： electron：21.4.4 electron-builder：21.2.0 [手动下载地址](https://registry.npmmirror.com/binary.html?path=electron/) 这里下载**electron-v21.4.4-win32-x64.zip** 并且需要下载对应版本的**SHASUMS256.txt**文件，加上版本后缀全部放在C/user/.../appData/Local/electron/Cache目录下重新执行打包指令 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4eb6b8eda094484db599ee89c69869c2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgVHdlbHZlNjE5:q75.awebp?rk3s=f64ab15b&x-expires=1765509077&x-signature=N4kXGePh02btq7FDW6xUNe2796Q%3D) ## ------------------------------------------------------------------------------ #### 8. 打包时无法下载winCodeSign或其他包文件 [下载地址](https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/) 下载 winCodeSign 对应版本放到 C/user/.../appData/Local/electron-builder/Cache/winCodeSign ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a67f352ff82141e39d47a307728d46cc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgVHdlbHZlNjE5:q75.awebp?rk3s=f64ab15b&x-expires=1765509077&x-signature=v%2FoG8di6siSPjMtee4tqaBZ0eeE%3D)