vite: ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1
yarn create vite@ vuets_electron --template vue-ts cd ./vuets_electron yarn install && yarn dev
vuets_electron 루트 디렉터리에 .npmrc를 생성하고 설정합니다. up 전자 미러 소스# /.npmrc ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/로그인 후 복사vuets_electron的根目录下创建.npmrc, 设置一下electron的镜像源
# electron yarn add -D electron # electron-builder 用于打包 yarn add -D electron-builder # electron-devtools-installer yarn add -D electron-devtools-installer # 为了保证后续步骤，这里在安装一个concurrently, yarn add concurrently
安装electron相关的包
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
// webPreferences: {
// preload: path.join(__dirname, 'preload.js')
// }
})
// 加载vue url视本地环境而定，如http://localhost:5173
win.loadURL('http://localhost:3000')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})创建electron主进程文件main.ts: /src/main/main.ts
{
"name": "vuets_electron",
"private": true,
"version": "1.0.0",
// +++ 增加入口
"main": "src/main/main.js",
// +++
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
// +++ 设置electron开发启动命令
"electron:dev": "concurrently \"yarn dev\" \"electron .\""
// +++
}
// ...
// 其它配置
}调整启动命令：package.json
1 vue 启动： yarn dev
2 那electron要如何启动呢? 从electron官方文档我们可以清楚的知道，electron可以加载URL，那么我们就可以在启动electron之前启动vue，然后将vue的访问入口接入electron，在同时启动electron不就可以了吗~
3 千万不要忘了设置入口文件哟~~~
# package.json
{
"name": "vuets_electron",
"private": true,
"version": "1.0.0",
"main": "src/main/main.js",
// +++
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"electron:dev": "concurrently \"yarn dev\" \"electron .\"",
// +++ 设置electron打包命令
"electron:build": "yarn build && electron-builder"
// +++
}
// ...
// 其它配置
// +++ 打包相关设置
"build": {
"appId": "ink.bennent_g.demo",
"directories": {
"output": "output"
},
// 其它的build相关设置，可参考 electron-builder官方文档
}
}到这，我们运行 yarn electron:dev 就能看到熟悉的electron页面了
1 打包vue
2 将vue的入口文件接入electron
3 打包electron这样我们就能得到完整的安装包
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
// +++
base: './',
// +++
server: {
port: 3000
}
// ...
})vite.config.ts调整
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
// webPreferences: {
// preload: path.join(__dirname, 'preload.js')
// }
})
// +++ 开发环境与打包后加载vue入口文件有所区别
// and load then index.html or the app
if(process.env.npm_lifecycle_event === 'electron:dev') {
win.loadURL('http://localhost:3000')
win.webContents.openDevTools()
} else {
win.loadFile('dist/index.html')
}
// +++
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})src/main/main.ts 调整
vuets_electron // 项目名称 │ —— node_modules │ —— dist // vue打包目录 │ —— output // electron打包目录 │ —— public │ —— .npmrc │ —— package.json │ —— vite.config.ts │ —— tsconfig.json │ └─── src // 开发相关目录 │ │ main.ts // vue默认入口文件 │ └───assets // 静态资源目录 │ │ ... │ └───main // electron主进程目录 │ │ main.ts │ └───render // 渲染进程目录即vue相关目录结构 │ │ router │ │ views │ │ ...
为了清晰的区分electron的主进程和渲染进程，我们可以将vue相关的文件规整到render的目录下
移动vue相关文件，请务必注意vue相关引用的路径问题
如下是本人的目录结构，可参考
const router = createRouter({
// history: createWebHistory(),
// 修改为
history: createWebHashHistory(),
routes
})至此 我们的electron开发框架就搭建完成了，可以愉快的撸代码了~
🎜rrreee🎜3. 전자 시작🎜🎜🎜electron 메인 프로세스 파일 main.ts 생성: /src/main/main.ts🎜🎜rrreee🎜🎜을 조정합니다. 시작 명령: package .json🎜1 vue 시작: Yarn dev🎜2 전자를 시작하는 방법 공식 전자 문서에서 전자가 URL을 로드할 수 있다는 것을 분명히 알 수 있으며 전자를 시작하기 전에 vue를 시작한 다음 vue 접속 입구 Electron에 연결하고 동시에 Electron을 시작하는거겠죠?~🎜3 엔트리파일 설정 잊지마세요~~~🎜🎜rrreee🎜如果项目使用了vue-router，我们在build后运行exe，会发现首页
전자 관련 패키지 설치白屏，这是因为 electron 仅支持hash模式，如果使用了createWebHistory()创建路由，可更改为createWebHashHistory()
이때, Yarn Electron:dev를 실행하고 you 익숙한 Electron 페이지를 볼 수 있습니다🎜🎜4. Electron Packaging🎜🎜🎜1 Pack vue🎜2 vue의 항목 파일을 Electron🎜3 Pack Electron에 연결하면 완전한 설치 패키지🎜🎜rrreee🎜🎜vite를 얻을 수 있습니다. config .ts 조정🎜🎜rrreee🎜🎜src/main/main.ts 조정🎜🎜rrreee🎜5. 프로젝트 디렉토리 정렬🎜🎜🎜전자의 주요 프로세스와 렌더링 프로세스를 명확하게 구분하기 위해 vue 관련 파일을 정리할 수 있습니다. render vue 관련 파일을 디렉터리로 이동합니다. vue 관련 참조의 경로 문제에 주의하세요🎜다음은 제 디렉터리 구조입니다. 🎜🎜rrreee🎜를 참조하세요. 이제 우리의 전자 개발 프레임워크가 완성되었습니다~🎜🎜3. 패키징 홈페이지 로딩 공백 문제(보충)🎜🎜🎜프로젝트가 vue-router를 사용하는 경우 빌드 후 exe를 실행합니다. , 홈페이지 가 흰색 화면임을 알 수 있습니다. 이는 전자가 createWebHistory()를 사용하여 생성하는 경우에만 지원하기 때문입니다. 경로를 createWebHashHistory()로 변경할 수 있습니다. 그게 다입니다 🎜🎜rrreee위 내용은 vue3+ts+vite+electron을 사용하여 데스크톱 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
