2. 编辑vite.config.js 修改文件vite.config.js的base,修改后的文件如下所示: // vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig({base:"./",// 新增plugins:[vue()]}) 3. 同时开启vite和electron服务 为了使vite...
用Vite和Electron来快速构建一个Vue3桌面应用。但是，之前构建的应用仅仅是一个简单的版 本。在开发过程中，为了更好的开发体验，在开发electron的时候，肯定也希望能有动态模块热 重载（HMR），更别说vite那迅雷不及掩耳盗铃儿响叮当之势的加载速度。因此，接着上一篇文章所完成的项目代码，我们来完成Vite和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...
运行pnpm elec:dev单独运行electron程序, 运行pnpm vite:dev单独运行vite项目 运行pnpm vite:build:hot热重载构建vite项目 运行vite:build构建vite项目 运行pnpm builder构建electron项目 问题避坑: 搭建上述软件时遇到以下问题: electron与vite同时启动时第一次会抛错找不到页面,解决方式:先运行vite之后再执行electron de...
简介:基于Vite+Vue3+Electron整了一个桌面应用模板 前言: 随着前端的更新迭代,基于js/ts开发的桌面应用框架也越来越多,从heX,electron,nwjs到tauri,Qt,以及Rn和flutter也有桌面应用业务。 而今天的主角正是electron,作为一款2013年推出的桌面应用开发框架,其运行于Chromium内核以及node平台,使得开发者可以使用html+css...
一. 简介 上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能,现在是时候来看看怎么完成最后一步——打包了。 源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3 系列文章:
在根目录创建一个plugins编写vite插件帮我们启动electron plugins vite.electron.dev.ts //编写electron开发模式 vite.electron.build.ts //打包electron项目 index.html src main.ts App.vue background.ts //手动创建文件用于编写electron package.json tsconfig.json ...
简介:Vue3 Vite electron 开发桌面程序 Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML...
// https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [vue()], }) 我们在终端中,执行npm run build命令。 就在根目录中生成了, dist 文件夹。 设置Electron 框架 有了Vue3 项目构建出来的 dist 目录之后, 设置Electron 就很简单了。
在根目录创建一个plugins编写vite插件帮我们启动electron plugins vite.electron.dev.ts//编写electron开发模式 //打包electron项目 index.html src main.ts App.vue background.ts//手动创建文件用于编写electron package.json tsconfig.json vite.config.ts