Electron+vue3+vite+TS的结合使用记录 |
您所在的位置：网站首页 › electron—vite官网 › Electron+vue3+vite+TS的结合使用记录 |
Electron+vue3+vite+TS的结合使用记录
|
Electron是一个桌面应用框架，使用js+css+html即可开发，并且可以打包出Mac,window,linux多个平台的应用，类似uniapp，一套代码多端覆盖 electron分为 主进程，渲染进程(web页面)，我们可以通过IPC来通讯，其中开启渲染进程使用node后，也可以在渲染进程使用node方法 说明想要让vue和electron结合使用，我在网上找了许多案例，其中有vue-elecron，还有一些等，但是这些都是使用webpack的而且很久很久几年没更新了 最后找到了一个在更新的，并且star还比较多。electron + vue + vite + ts的模板github 使用创建项目 npm create electron-vite 复制代码进入项目文件夹 cd electron-vite 复制代码安包 npm install # 这么操作的话，安包会很慢，虽然你设置了国内镜像，但是electron一些依赖还是会从npm官方进行下载，所以慢 复制代码安包慢可以先设置环境变量,我这里用的是yarn 然后可以安包了 yarn install 复制代码这样就完成了项目初始化 yarn run dev # 启动项目 复制代码目录结构 electron-vue src 为vue项目文件，渲染进程 electron 为electron的主入口，主进程文件 复制代码 原理大家都知道vite的模式就是使用各种插件，那么这里也就是使用了一位大佬开发的vite插件叫 vite-plugin-electron进行了处理 // vite.config.ts import { rmSync } from 'node:fs' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' import renderer from 'vite-plugin-electron-renderer' export default defineConfig(({ command }) => { rmSync('dist-electron', { recursive: true, force: true }) const isServe = command === 'serve' const isBuild = command === 'build' const sourcemap = isServe || !!process.env.VSCODE_DEBUG return { plugins: [ vue(), electron([ { // Electron入口文件 entry: 'electron/main/index.ts', onstart(options) { if (process.env.VSCODE_DEBUG) { console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App') } else { options.startup() } }, vite: { build: { sourcemap, minify: isBuild, outDir: 'dist-electron/main', rollupOptions: { external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), }, }, }, }, { entry: 'electron/preload/index.ts', onstart(options) { // 当Preload-Scripts构建完成时，通知Renderer-Process重新加载页面 // 而不是重新启动整个应用程序。 options.reload() }, vite: { build: { sourcemap: sourcemap ? 'inline' : undefined, // #332 minify: isBuild, outDir: 'dist-electron/preload', rollupOptions: { external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), }, }, }, } ]), // 在渲染进程中使用Node.js API renderer(), ] }}) 复制代码大概就是这些配置项了，在模板中这些都已经写好了 在渲染进程中开启node 配置nodeIntegration: true, contextIsolation: false 这两项即可 const electron = require("electron"); const win = new electron.BrowserWindow({ title: "Main window", icon: "favicon.ico", webPreferences: { // 警告:在生产环境中启用nodeIntegration并禁用contextIsolation是不安全的 // 考虑使用contextBridge.exposeInMainWorld // 阅读更多 https://www.electronjs.org/docs/latest/tutorial/context-isolation nodeIntegration: true, // 设置true contextIsolation: false // 设置false // webSecurity: false, // 允许跨域 } }); 复制代码 问题记录最后更新时间 2023-4-11 安装electron慢在前面使用步骤中 已经有记录解决方法 node模块报错有一些node模块在vue页面中使用会报错找不到，其实开启渲染进程node后，是可以使用的，只不过vite打包时候当普通模块打包处理了，所以需要配置为外部引用 例如ws模块 就会出问题提示不能在浏览器运行 用到插件vite-plugin-externals yarn add vite-plugin-externals 复制代码配置vite.config.ts import { viteExternalsPlugin } from 'vite-plugin-externals' export default defineConfig(({ command }) => { //....此处省略其它代码 return { plugins: [ vue(), // 配置外部引入模块，这样打包的时候就不会被打包 viteExternalsPlugin({ ws: 'ws', // 例如puppeteer-core依赖node的ws模块 }) ], }) 复制代码然后在index.html文件中 引入ws模块就行啦 // 一些nodejs模块需要在这里引入，并在vite.config.js中配置externals，也就是cdn引入 var ws = require('ws') // 利用var挂到全局去 复制代码 Mac下复制粘贴快捷键失效在mac环境中，electron窗口中，如果替换了默认的菜单，那么复制粘贴的快捷键会失效，解决方法是添加菜单，并给菜单添加快捷键，代码如下 // electron/main/index.ts import { Menu, MenuItem } from 'electron' const menu = new Menu() // 创建菜单 // 判断当前为mac系统则添加以下菜单 if (process.platform === "darwin") { menu.append(new electron.MenuItem({ label: "编辑", submenu: [ { role: "undo", label: "撤销" }, { role: "redo", label: "重做" }, { type: "separator", label: "分割线" }, { role: "cut", label: "剪切" }, { role: "copy", label: "复制" }, { role: "paste", label: "粘贴" }, { role: "delete", label: "删除" } ] })); } Menu.setApplicationMenu(menu) 复制代码 最后大家有什么electron的问题欢迎一起讨论 目前使用electron+puppeteer开发的一款应用 |
【本文地址】
今日新闻 |
推荐新闻 |