使用yarn创建vite+vue3&&electron多端运行

代码の搬运工

已于 2025-03-02 14:45:29 修改

阅读量661

点赞数 3

CC 4.0 BY-SA版权

文章标签： electron javascript 前端 vue.js

于 2024-03-09 20:37:22 首次发布

本文链接：https://blog.csdn.net/qq_15064263/article/details/136590180

文章目录

第一步使用yarn创建vite+vue3项目
- 遇到创建报错看
第二步引入electron
第三步创建main.js
- 在electron下面的main.js写入下面代码
第四步安装同时运行多条命令npm包&&修改package.json文件
- npm包
- 增加一条electron运行脚本命令
效果图

第一步使用yarn创建vite+vue3项目

yarn create vite

遇到创建报错看

创建vite项目报错

第二步引入electron

我这里用的是淘宝镜像下载的包

cnpm install electron --save-dev

第三步创建main.js

在根目录创建electron文件夹
在electron 文件夹下面创建 main.js

在electron下面的main.js写入下面代码

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

function createWindow() {
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL('http://localhost:5173'); // Vite 默认的开发服务器地址

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

第四步安装同时运行多条命令npm包&&修改package.json文件

npm包

cnpm install concurrently --save-dev

增加一条electron运行脚本命令

"start:electron": "concurrently \"vite\" \"electron .\""

以下完整代码

{
  "name": "myproject",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "start:electron": "concurrently \"vite\" \"electron .\""
  },
  "dependencies": {
    "vue": "^3.4.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "concurrently": "^8.2.2",
    "electron": "^29.1.1",
    "electron-builder": "^24.13.3",
    "typescript": "^5.2.2",
    "vite": "^5.1.4",
    "vue-tsc": "^1.8.27"
  }
}