vue+vite+electron项目初始化

最新推荐文章于 2025-06-06 16:47:17 发布

小杨爱编程

最新推荐文章于 2025-06-06 16:47:17 发布

阅读量299

点赞数

分类专栏： vue3 文章标签： vue.js electron 前端

本文链接：https://blog.youkuaiyun.com/Yajyaj123/article/details/131052470

版权

vue3 专栏收录该内容

15 篇文章

订阅专栏

文章指导读者如何创建一个基于Vite的前端项目，并集成Electron。首先通过npm创建Vite项目，然后设置Electron的npm镜像源以解决安装问题。接着，建立main.cjs作为Electron的入口文件，并安装concurrently来同时运行Vite和Electron。最后，在package.json中配置脚本，实现开发环境的启动。

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

首先，创建一个vite项目，Vite | 下一代的前端工具链

npm create vite@latest

随后安装electron，安装失败试试这个

使用命令：npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

然后执行下边这个：

npm install electron

安装完毕后新建main.cjs，作为electron的入口文件

const {BrowserWindow, app} = require("electron")
const {fastKey} = require("yarn/lib/cli.js");

const createWin = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        maximizable:false
    })
    win.loadURL("http://127.0.0.1:5173/").then(r => {})
    win.setMenu(null)
}

app.whenReady().then(() => {
    createWin()

})

安装concurrently

npm install concurrently

安装完毕后在，package.json中进行配置

配置脚本

整体package.json,别无脑复制

{
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "main.cjs",
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\"",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "concurrently": "^8.1.0",
    "electron": "^25.0.1",
    "element-plus": "^2.3.6",
    "vue": "^3.2.47",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^5.0.2",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

启动项目，npm run dev

完活