electron中使用vue3+vite

简介: electron中使用vue3+vite

先说结论,重点还是在于mainWindow.loadURL()


打包后还是加载http://localhost:3000是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder加载vite打包后的文件进行打包。

为了代码能够根据不同环境在运行时加载http://localhost:3000,在打包时加载文件,此处需要使用环境变量来切换生产和开发环境。


vite.config.ts 配置


渲染进程配置 renderer/vite.config.ts

本文基于开启 nodeIntegration,如果无需在渲染进程中使用 Node.js API 可以忽略渲染进程配置

渲染进程代码 main/index.ts:

npm create vite 生成代码


主进程配置 main/vite.config.ts

Vite 提供了 build.lib 快捷入口,使得主进程配置十分简单;其次只需要关注下 Rollup 的 external 即可


import { builtinModules } = from 'module'
export default {
  root: __dirname,         // 指向主进程目录
  build: {
    outDir: '../../dist/main',
    lib: {
      entry: 'index.ts',   // Electron 目前只支持 CommonJs 格式
      formats: ['cjs'],
      fileName: () => '[name].cjs',
    },
    rollupOptions: {
      external: [          // 告诉 Rollup 不要打包内建 API
        'electron',
        ...builtinModules,
      ],
    },
  },
}
复制代码


主进程代码 main/index.ts:


import { app, BrowserWindow } from 'electron'
app.whenReady().then(() => {
 win = new BrowserWindow({
 title: 'Main window',
 webPreferences: {
 preload: join(__dirname, '../preload/index.cjs'),
 nodeIntegration: true,
 contextIsolation: false,
    },
  })
 if (app.isPackaged) {
 win.loadFile(join(__dirname, '../renderer/index.html'))
  } else {
 win.loadURL('http://localhost:3000')
  }
})
复制代码


启动脚本分析


先出个结论 - Electron 的启动与 Node.js 相比行为几乎是一致的 - 可执行程序 + 入口文件


# 当我们使用 Node.js 执行一个文件
node path/filename.js
# 这里使用的是全局的 node 命令
# 当我们使用 Electron 执行一个文件
node_modules/.bin/electron path/filename.js
# 这里使用的是项目中的 electron
复制代码


再思考下关于 Electron 启动的问题


  1. 开发环境下 Electron 加载 Vite 启动的开发服务器,即通过 loadURL() 加载一个 http 地址
  2. 生产环境下使用 loadFile()加载一个入口文件


启动脚本设计


Vite 提供了全量的可编程化的 Node.js API 方便我们灵活调度,比如 vite server 命令对应 API 中的 createServer().listen()

基于它我们可以很方便的在我们的脚本中启动 Vite

scripts/watch.mjs


import { spawn } from 'child_process'
import { createServer, build } from 'vite'
// electron 绝对路径,Windows 为 electron.exe
import electronPath from 'electron'
// ---- 渲染进程部分 ----
const server = await createServer({ configFile: 'packages/renderer/vite.config.ts' })
await server.listen()
// ---- 主进程部分 ----
let electronProcess = null
build({
  // 加载主进程构建配置
  configFile: 'packages/main/vite.config.ts',
  build: {
    // 通过 watch 选项监听主进程文件改动,时时编译
    watch: {},
  },
  plugins: [{
    name: 'electron-main-starter',
    // 第一次编译、重新编译后都会触发
    writeBundle() {
      if (electronProcess) {
        // 重启前先杀死当前正在运行的 electron 程序
        electronProcess.kill()
      }
      // 启动、重启 electron
      electronProcess = spawn(
        // 相当于官方的 electron . 启动方式
        electronPath, ['.'],
        // 将 electron 主进程的 console.log 输出到当前命令行
        { stdio: 'inherit' },
      )
    },
  }],
})
复制代码


配置


{
  "scripts": {
    "dev": "node scripts/watch.mjs"
  }
}
复制代码


命令


npm run dev
复制代码


到这一步已经完成了,已经是一个可用的应用了!


渲染进程使用 Node.js API


renderer/src/main.ts

默认情况下 Vite 会将所有的 import 裸模块以 ESM 格式预构建到 node_modules/.vite/ 文件夹下


  1. Node.js 内置模块会被当成 external 模块处理,但只是一个简单的 polyfill 并不能在渲染进程中使用
  2. electron 模块会执行预构建,得到的结果也是不可以使用的,因为 electron 导出的只是一个程序运行路径而已


上述两点,需要我们对其有正确的处理才能保障其在渲染进程中工作


  1. 第一种方式,如果使用 require('electron') 可以避开预构建和 polyfill 行为,从而正常工作
  2. 如果将 import electron form 'electron' 在与构建中排除,并在 Vite 对其 polyfill 之前进行拦截处理,也可以使其正常工作


// ❌ 不会正常工作
import { ipcRenderer } from 'electron'
// ✅ 可以正常工作
const { ipcRenderer } = require('electron')
复制代码


到此为止,使用部分已经 OK 了!除了看起来丑陋的


require('electron')


总结



  • Vite 个人觉得是个不错的方案,毕竟打包工具早晚会推出历史舞台;Vite 往前又迈了 0.5步
  • Electron 的集成只是一个案例,从一个案例出发到写一个插件,你会更好的理解 Vite 设计、思想
  • 最后,不能什么都站在客观的角度去等待,更需要我们主动的去建设
相关文章
|
4月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
155 58
|
2月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
233 1
|
3月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
163 3
|
4月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
82 8
|
4月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
73 1
|
3月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
162 1
|
21天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
25天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
83 12
|
21天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
21天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。

热门文章

最新文章