vite vue3 electron整合

最新推荐文章于 2025-03-13 08:52:52 发布

YYLAJSX

最新推荐文章于 2025-03-13 08:52:52 发布

阅读量564

点赞数

分类专栏：笔记文章标签： electron vue.js 前端

本文链接：https://blog.youkuaiyun.com/YYLAJSX/article/details/126531706

版权

本文介绍了如何将Vite与Vue3框架结合，并与Electron进行深度整合，包括设置所需依赖包、package.json中脚本和Electron打包配置、主进程main.js的配置，以及解决打包后可能出现的首页白页问题的vite.config.js配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.所需包

"dependencies": {
   
  "vue": "^3.2.8"
},
"devDependencies": {
   
  "concurrently": "^7.3.0", //命令拼接
  "cross-env": "^7.0.3",  //node环境切换
  "electron": "^20.0.3",
  "electron-builder": "^23.3.3",  //electron打包工具
  "rimraf": "^3.0.2",  // 快速删除目录
  "wait-on": "^6.0.1",   // 进程等待
  "@vitejs/plugin-vue": "^1.6.0",
  "@vue/compiler-sfc": "^3.2.6",
  "vite": "^2.5.2"
  }

2.package.json script及electron打包配置

"main": "electron/main.js",
  "scripts": {
   
		"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
		"electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
		"electron:build"<