vue3结合electron

最新推荐文章于 2025-02-14 14:07:48 发布

_前端开发工程师

最新推荐文章于 2025-02-14 14:07:48 发布

阅读量3.1k

点赞数 1

文章标签： electron vue.js

本文链接：https://blog.youkuaiyun.com/dpy521/article/details/124846128

版权

本文档介绍了如何一步步将Vue3项目转化为一个Electron应用。首先创建Vue3项目并确保其正常运行，接着通过特定命令使项目兼容Electron。然后，你需要修改background.js文件以适配 Electron。最后，成功在Vue组件中引入并使用Electron和Node模块，解决了导入模块时遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

像平时一样先创建vue3项目，能正常运行之后进行第二步

第二步

执行vue add electron-builder命令，让vue项目变成一个electron+vue的项目

第三步

修改项目中的background.js文件

'use strict'

import { app, protocol, BrowserWindow,ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron

最低0.47元/天解锁文章