vite+vue3+electron项目搭建教程

1303 字

7 分钟

vite+vue3+electron项目搭建教程

2025-05-02

electron

vite

/

vue

/

electron

一、使用vite创建vue项目#

在自己的项目文件夹下打开终端，输入以下命令创建vue项目

1
npm create vite@latest

是否需要使用TS看自己的需求，为了方便我这里就选用JS了

1
# 进入文件夹
2
cd <你的项目名称>
3

4
# 安装依赖
5
npm install

二、安装electron#

在项目中下载electron下载命令：

1
# 如果安装失败建议使用cnpm，至于cnpm怎么安装使用，请自行搜索
2
npm install electron -D

定义入口文件

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。
手动在vue项目中的根目录创建文件
然后在 package.json 中修改人口文件

1
{
2
  "main": "electron/main/main.js"
3
}

因为vue项目默认采用的是ES6的模块化，而electron基于nodejs，nodejs的模块化又是使用的commonjs，所以我们在 package.json 中的type标签，修改为：

1
{
2
  "type": "commonjs"
3
}

三、运行electron项目#

在自己创建的electron文件夹下的main.js文件里写入这段代码

1
const { app, BrowserWindow } = require('electron')
2
const createWindow = () => {
3
    const win = new BrowserWindow({
4
        width: 800,
5
        height: 600
6
    })
7

8
    win.loadURL('http://localhost:5173')
9
    // win.loadFile('index.html')
10

11
}
12
app.whenReady().then(() => {
13
    createWindow()
14
    app.on('activate', () => {
15
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
16
    })
17
})
18
app.on('window-all-closed', () => {
19
    if (process.platform !== 'darwin') app.quit()
20
})

这段代码的大概意思就是创建了一个窗口，然后窗口里展示的内容就是一个网页，这里写的URL可以是本地地址也可以是线上地址，比如你写个http://www.baidu.com这样运行过后就是百度的客户端了，聪明的小伙伴应该知道我这里写http://localhost:5173的含义了吧

运行项目

在终端中依次执行以下命令

1
# 启动vue项目
2
npm run dev
3

4
# 启动electron，这里的命令是electron官方指定的
5
npx electron .

到这里就能看到vue项目成功的启动在一个桌面端应用程序了

四、完善必备的工具#

以上集成方案是很原始的，在真实的项目开发中肯定是不可取的

缺点：#

第一：没有热刷新
第二：每次启动都需要执行两个命令
第三：打包后页面丢失
下面的步骤就是来解决这几个问题的

热更新工具

安装：

1
npm install nodemon -D

重新更改scripts标签的启动命令，监控文件改变，代码如下：

1
{
2
  "scripts": {
3
     "electron": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
4
  }
5
}

这个参数的含义是：用nodemon启动electron，并监控js、html、css、vue等文件的变动。

命令行合并工具现在开发环境，每次都需要执行“npm run dev”和“npx electron .”两个命令才能启动项目。所以我们希望能够有一个命令可以同时执行vue和electron。

安装：

1
npm install npm-run-all -D

这个工具只需要在package.json中scripts标签增加命令：

1
{
2
  "scripts": {
3
    "electron:dev": "npm-run-all --parallel dev electron"
4
  }
5
}

这时候运行

1
npm run electron:dev

打包工具

安装：

1
npm install electron-builder -D

配置electron-builder：
在scriptes标签里面增加命令：

1
{
2
  "scripts": {
3
    "electron:build": "vite build && electron-builder"
4
  }
5
}

打包配置

打包配置 package.json文件中增加配置

1
{
2
  "build": {
3
    "productName": "electron-vue",
4
    "appId": "electron-vue",
5
    "asar": true,
6
    "directories": {
7
      "output": "dist_electron/${version}"
8
    },
9
    "files": [
10
      "dist",
11
      "electron"
12
    ],
13
    "nsis": {
14
      "oneClick": false,
15
      "allowToChangeInstallationDirectory": true
16
    },
17
    "mac": {
18
      "category": "your.app.category.type"
19
    },
20
    "win": {
21
      "icon": "./electron/log.ico",
22
      "target": [
23
        {
24
          "target": "nsis",
25
          "arch": [
26
            "ia32"
27
          ]
28
        }
29
      ]
30
    },
31
    "linux": {}
32
  }
33
}

这是打包的一个最基础的配置，简单讲解：#

productName：// 项目名，也是生成的安装文件名
appId：软件的ID，用来上架各平台。
nsis：软件安装包的交互行为，配置稍多，请自行查询。
win.icon：// 应用图标
win.target.arch：建议设置ia32，适配windows大部分版本。

更详细的说明可以查阅官方文档#

这时候就可以运行新加的命令打包了，但是打包过后还是发现页面是空白的，这是因为之前我们在main.js里面填写的是本地址http://localhost:5173，打包过后就没有这个地址了，所以我们要把地址换成 ../dist/index.html，这样就可以了

最后还需要配置以下vite，让vite打包后的静态资源能够以本地file协议访问。vite配置属于前端知识点了，有兴趣的同学可以自行了解下。
vite.config.js的配置如下：

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import {resolve} from 'path'
4

5
export default defineConfig({
6
  plugins: [vue()],
7
  base:'./',
8
  manifest:true,  //配置后才能让编译后的vue路径被正确识别
9
  resolve: {
10
    alias: {
11
      '@': resolve(__dirname, './src')
12
    }
13
  },
14
  optimizeDeps: {
15
    exclude: ['electron'], // 告诉 Vite 排除预构建 electron，不然会出现 __diranme is not defined
16
  }
17
})

补充说明：#

每次打包前都需要手动更改页面路径会显得很麻烦，所以可以利用electron提供的一个属性判断当前是开发环境还是生产环境，以下是详细代码

1
const { app } = require('electron')
2
const {join} = require('path')
3

4
// 映射页面
5
const env = app.isPackaged ? 'production' : 'development'
6
const indexHtml = {
7
    development: 'http://localhost:5173', // 开发环境
8
    production: join(__dirname, '../dist/index.html') // 生产环境
9
}
10
win.loadURL(indexHtml[env])