Uniapp+Vite+Vue3+Electron 快速构建桌面应用

心宽体胖的米六

已于 2022-07-09 19:26:32 修改

阅读量5.9k

点赞数 2

分类专栏： uniapp结合electron 文章标签： electron javascript vue.js

于 2022-07-09 09:09:12 首次发布

本文链接：https://blog.csdn.net/Me_FF/article/details/125688885

版权

uniapp结合electron 专栏收录该内容

3 篇文章 8 订阅

订阅专栏

本文介绍了如何使用Vue3、Vite和Electron构建跨平台的桌面应用，步骤包括创建uni-app项目、配置Vite和Electron、实现模块热更新以及打包过程。适合uniapp和Electron开发者提升技能。

摘要由CSDN通过智能技术生成

下一篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用(二)—实现模块热更新重载
 下下篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用(三)—打包

一. 简介

首先，介绍下Uniapp和Electron

uni-app 是一个使用 Vue.js开发所有前端应用的框架
Electron 是一个使用 HTML、CSS和 JavaScript 构建桌面应用程序的框架

二. 创建一个uni-app项目

1. 全局安装vue-cli 若已安装则跳过

npm install -g @vue/cli@4

2. 使用Vue3/Vite/JavaScritp版

npx degit dcloudio/uni-preset-vue#vite uni-vue3-electron

3. 进入项目并安装依赖

cd uni-vue3-electron
npm install

4. 配置 `vite.config.js`

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

三. 配置Electron

1. 安装 `electron` 为依赖

npm install -D electron

2. 根目录新建 `electron`文件夹，在`electron`里新建`main.js`

// main.js 中内容如下

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
  })
  // 注意: 该路径为uniapp 发行H5/PC后生成的文件路径
  win.loadFile('dist/build/h5/index.html')
  // win.webContents.openDevTools() // 开启调试工具
}
app.whenReady().then(() => {
  createWindow()
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

3. 修改 `package.json` 文件

{
  "name": "uni-preset-vue",
  "version": "0.0.0",
  "main": "electron/main.js",  // 新增  不要复制注释
  "author": "心宽体胖的米六",  // 新增 
  "description": "My Uniapp-Electron",  // 新增
  "scripts": {
    "dev:electron": "electron .", // 新增
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}