【win&mac】30分钟学会Vite创建和打包Electron+Vue3,前端跨平台桌面应用零基础入门教程【2024新版ESM规范】共计6条视频,包括:1.基于 Vite 创建 Vue3 项目、2.安装和配置 Electron、3.兼容 mac等,UP主更多精彩视频,请关注UP账号。
Vue Vite 路由必须使用hash路由,否则 electron 无法加载 import{ createRouter, createWebHashHistory }from'vue-router'constrouter = createRouter({// history: createWebHistory(import.meta.env.BASE_URL),history: createWebHashHistory(),// vue 打包后要用 hash 模式,否则 electron 无法加载routes: [ ......
在「vite.config.ts」中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry:...
终极解决方案:既然是路径问题,那么,在vite打包的时候,让打包程序自动修改即可。 vue项目的vite.config.js中的defineConfig里,添加一行base: './', 就好了 import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultde...
baseURL: import.meta.env.VITE_APP_BASE_API, // 超时 timeout: 10000 }) // request拦截器 service.interceptors.request.use(config => { // 是否需要设置 token const isToken = (config.headers || {}).isToken === false // 是否需要防止数据重复提交 ...
vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要...
是在https://github.com/electron-vite/electron-vite-vue库的参考下完成的,将此库的文件复制到原本存在的项目中完成打包。 步骤如下: 将electron-vite-vue拷贝到本地 将electron-vite-vue项目中的electron文件夹、electron-builder.json5拷贝到已存在项目根目录下 ...
【分享】Vite+Vue3+Electron打包桌面应用_哔哩哔哩_bilibili ⨯ Application entry file "electron\main.js" in the "D:\vs2024proj\electron_vite_ts_demo_sunny\electron-vite-demo-sunny\dist_electron\win-ia32-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration. failedTask=...
Vite + Vue3 + Electron 打包后静态资源路径错误 图片src 如果是动态拼接的话,路径指向会出现问题 import { ref } from "vue"; const filename = ref("vite.svg"); <template> </template> 第一个路径不正确:file:///G:/vite.svg第二个路径为:file:///G:/vite-electron/release/win-unpacked/...
Vue 3.2.47 Yarn 1.22.18 开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...