01_Eletron集成Vue

最新推荐文章于 2024-04-23 10:40:06 发布

输入昵称_______

最新推荐文章于 2024-04-23 10:40:06 发布

阅读量194

点赞数

分类专栏：前端开发100问

本文链接：https://blog.csdn.net/qq_40393893/article/details/119257124

版权

本文记录了一次在Vue项目中集成Electron的过程，包括遇到的问题和解决方案。主要操作包括创建Vue项目，引入Electron，配置相关文件如main.js和electron-run-dev.js，并在package.json中调整配置。通过npm run electron-dev命令，可以成功启动集成项目。

摘要由CSDN通过智能技术生成

[Electron] 记一次 Vue 集成 Electron

具体步骤在转载链接中不加以赘述，在这描述一下楼主遇到的问题及解决方案

大致方法为安装创建Vue项目，并在项目中引入Electron
主要配置文件为：
新增文件夹目录如下：
请添加图片描述
main.js:

const {
      app, BrowserWindow } = require("electron");

function createWindow() {
     
  // 创建浏览器窗口
  const win = new BrowserWindow({
     
    width: 800,
    height: 600,
    webPreferences: {
     
      nodeIntegration: true,
    },
  });

  // 修改为加载 Vue 服务地址
  win.loadURL("http://localhost:8080/");

  // 打开开发者工具
  win.webContents.openDevTools();
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);

//当所有窗口都被关闭后退出
app.on("window-all-closed", (