1
使用Vite+Electron构建VUE3桌面应用的指南
source link: https://direct5dom.github.io/2022/08/25/%E4%BD%BF%E7%94%A8Vite-Electron%E6%9E%84%E5%BB%BAVUE3%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E7%9A%84%E6%8C%87%E5%8D%97/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
创建一个Vite项目
创建命令如下:
yarn create vite <your-vue-app-name> --template vue
此处创建一个项目,名为vue-vite
:
yarn create vite vue-vite --template vue
进入并运行
进入项目,在运行前需要先安装下依赖:
cd vue-vite
yarn install
yarn dev
此时我们的Vue项目就已经运行起来了。
配置Electron
安装Electron
yarn add --dev electron
安装concurrently
和wait-on
concurrently
- 阻塞运行多个命令,-k
参数用来清除其它已经存在或者挂掉的进程wait-on
- 等待资源,此处用来等待url
可访问
yarn add -D concurrently wait-on
安装cross-env
和electron-builder
cross-env
- 该库让开发者只需要注重环境变量的设置,而无需担心平台设置electron-builder
- Electron打包库
yarn add -D cross-env electron-builder
Electron相关
在项目根目录创建electron
目录,然后在electron
中创建文件:
main.js
preload.js
electron/main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行,加载url
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
// 打开开发工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他
// 打开的窗口,那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
electron/preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
Vite相关
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
base: "./", // 新增
plugins: [vue()]
})
package.json
{
"name": "vue-vite",
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
"electron:build": "vite build && electron-builder"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"electron-builder": "^22.13.1",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
},
"build": {
"appId": "com.my-website.my-app",
"productName": "VueVite",
"copyright": "Copyright © 2021 vue-vite",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
}
# 开发中使用(热重载)
yarn electron:serve
# 打包
yarn electron:build
打包完成之后,会多出两个目录dist
和dist_electron
。
dist
- Vite打包的网页。dist_electron
- Electron封装Vite打包的结果。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK