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

原创已于 2024-04-05 06:56:39 修改 · 2.7k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2024-04-05 00:15:11 首次发布

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

2. Vue3+Vite项目搭建

执行命令行,创建Vue3+Vite脚手架: npm create vite 或 yarn create vite

修改脚手架中的无用部分

删除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>

初始化项目依赖

// 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支持

自定义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",
 }

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

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

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()],
})

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

// package.json
{
// ...其他配置
"main": "electron/index.js",
}

// 在项目的根目录新建一个electron文件夹,并新建一个index.js,作为electron的入口执行文件

编写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();
  }
});

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

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

效果图

4. 打包桌面端应用

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

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