从0到1搭建一个Vue3+Electron的框架

1. 前言: 上篇文章中使用到了Vue+Electron框架,这一篇文章主要讲解这个框架如何搭建

2. Vue3+Vite项目搭建

1. 执行命令行,创建Vue3+Vite脚手架: npm create vite 或 yarn create vite
   
2. 修改脚手架中的无用部分
   • 删除src/components下的所有文件
   • 修改src/App.vue内容

     <!--
       * @Author: wangzhiyu <w19165802736@163.com>
       * @version: 1.0.0
       * @Date: 2024-04-04 23:00:32
       * @LastEditTime: 2024-04-04 23:06:55
       * @Descripttion: 根组件
      -->
      <template>App</template>
      <script setup></script>
      <style></style>
     

3. 初始化项目依赖

   // package.json
   // 首先初始化项目基础依赖
   npm i 或 yarn add
   // 下载关于electron以及项目所需的依赖包 
   npm install electron@23.0.0 electron-browser-storage@1.0.7 electron-builder@23.6.0 electron-packager@17.1.1 concurrently@7.6.0 cross-env@7.0.3 -D
   // 或
   yarn add electron@23.0.0 electron-browser-storage@1.0.7 electron-builder@23.6.0 electron-packager@17.1.1 concurrently@7.6.0 cross-env@7.0.3 -D
   

3. 增加electron支持

1. 自定义package.json的scripts

   // package.json
   "scripts": {
   // 启动开发服务器(浏览器端调试使用)
   "dev": "vite dev", 
   // 打包前端包
   "build": "vite build", 
   // 启动开发调试桌面端
   "electron:start": " concurrently -k \"vite \" \"cross-env IS_DEV=true electron . \"",
   '// 打包桌面端应用(前提是前端包已经打好了)
   "electron:build.win": "electron-builder --win --dir",
    }
   

2. 指定打包的桌面端应用程序文件存存放的地址

   // package.json
   {
   // ...其他配置
   "build": {
   "directories": {
     "output": "dist_electron"
       }
      }
     }
   

3. vite.config.js中设置文件路径为./

   // vite.config.js
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     base: './',
     plugins: [vue()],
   })
   

4. 指定nodejs入口文件(electron的执行文件),另外注意删掉package.json中的module

   // package.json
   {
   // ...其他配置
   "main": "electron/index.js",
   }
   
   // 在项目的根目录新建一个electron文件夹,并新建一个index.js,作为electron的入口执行文件
   

5. 编写electron/index.js内容

   /* 
    * @Author: wangzhiyu <w19165802736@163.com>
    * @version: 0.0.0
    * @Date: 2024-04-04 23:00:32
    * @LastEditTime: 2024-04-04 23:29:27
    * @Descripttion: electron入口文件
   */
   // !: 这里的electron.js将会在node环境下运行
   
   const path = require('path')
   
   // 导入electronAPI
   const { app, BrowserWindow, Menu, ipcMain } = require('electron');
   
   // 初始化桌面端应用
   function createWindow() {
     // TODO: 根据不同环境设置不同的应用配置
     const isDev = process.env.IS_DEV === 'true'
     console.log(isDev, 'isDev');
   
     // 主窗口
     let mainWindow = null
   
     // 如果当前为开发环境,则执行开发环境的配置
     if (isDev === 'true') {
       // 根据不同环境设置不同的应用配置
       mainWindow = new BrowserWindow({
         fullscreenable: false,
         fullscreen: false,
         simpleFullscreen: true,
         webPreferences: {
           nodeIntegration: true,
           contextIsolation: false,
           webSecurity: false,
           allowRunningInsecureContent: true,
         },
       });
       // 打开控制台
       mainWindow.webContents.openDevTools();
     } else {
       // 生产环境的配置
       mainWindow = new BrowserWindow({
         fullscreenable: false,
         fullscreen: false,
         simpleFullscreen: true,
         webPreferences: {
           nodeIntegration: true,
           contextIsolation: false,
           webSecurity: false,
           allowRunningInsecureContent: true,
         },
       });
     }
   
     // 如果为 dev 环境加载本地url,否则加载打包后的index.html
     mainWindow.loadURL(isDev ? 'http://localhost:5173' : `file://${path.join(__dirname, '../dist/index.html')}`);
   }
   
   // 此方法将在Electron完成后调用,初始化,并准备创建浏览器窗口。
   app.whenReady().then(() => {
     // 创建windows应用
     createWindow();
   
     // 延迟3s 等待应用激活
     setTimeout(() => {
       console.log('已经过了3s了');
       app.on('activate', function () {
         // 如果应用激活后,窗口依然为0,则重新创建windows应用
         if (BrowserWindow.getAllWindows().length === 0) createWindow();
       });
     }, 3000)
   });
   
   // 应用销毁触发
   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
       app.quit();
     }
   });
   

6. 然后执行启动桌面端应用服务(开发环境)

npm run electron:start
// 或
yarn electron:start
// 即可探出以下窗口,这个窗口就是开发环境下的桌面端应用

4. 打包桌面端应用

// 首先执行静态资源打包命令
yarn build
// 然后打包桌面端应用程序
yarn electron:build.win

// 之后去项目根目录下会看到一个dist_electron文件夹,打开后点开win-unpacked文件夹,双击.ext应用程序即可启动

5. 总结: 以上就是Vue3+Vite+Electron框架的搭建过程,Vue2也是一样的道理,只需要更改一些配置即可,将vite改为vue-cli,其余没有什么需要改动的,对搭建框架有疑问的点,或者遇到问题了欢迎直接给我发私信😁