后来想用Vue来开发，但是当时的一个项目比较紧，直接用cdn的形式开发了，做成了N个页面，也没用组件，虽然比之前的直接DOM操作稍微好点，但是代码组织以及开发舒服度上还是差很多。
再后来，直接用vite+vue3进行开发，开发完直接部署到服务器上，在Electron中直接loadURL，相当于给用户定制个专属浏览器，其实和web版是一样的。
但是一直想vue3开发完，打包生成静态的html，然后在Electron中通过loadFile的方式进行开发。正好现在时间充裕，折腾一下。其实目前有很多已经整合好的专业方案，比如： 等，也不是很难，而且很多东西都帮我们搞好了，想省事的可以直接用它们。不过咱还是想自己搞一下，专不专业不要紧，重要的是自己搞一下。
我的想法也很简单：我像平时做web项目一样进行开发界面，最开始使用Electron的loadURL的方式引入我们的界面，开发完，我将vue项目打包一下，使用Electron通过loadFile的方式引入界面。不过实际的开发中还是遇到了一些问题的，这里记录一下步骤和遇到的问题。
首先和一个，过程都比较简单，我就不细说了。我的目录是这样的：
创建之后，分别启动vue项目和electron项目，此时我的Electron创建主窗口使用的时loadURL方法：
win.loadURL('http://localhost:5173/')到这里都没有问题，问题一般都处在打包阶段，此时我的Electron项目目录是这样的：
win.loadFile('static/index.html')这个要求很容易满足，只需要我们的Vue项目打包的时候，直接生成到这个目录就行了，于是我们去修改Vue项目中的vite.config.js 文件，配置打包输出目录为我们预想的那个目录即可。
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 修改打包的配置
build: {
outDir: '../desktop/static',
}
})
然后在Vue项目中执行打包操作：npm run build，确实能将静态资源生成到我们预想的目录中，不过，当我们在Electron中访问的时候，会出现资源找不到的情况：
/
这个 / 在不同的地方，代表不同的意义。在部署到服务器上的时候，它指的时网站的根目录，在文件系统中，它一般指根路径(绝对路径)，比如：window下一般是 'C:\'，Linux下指文件系统的根目录。因此这里将其改成“相对路径”即可。手动改就能看到效果，不过我们还是希望能让vue打包的时候自动帮我们生成相对路径。修改 vite.config.js 文件：
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: '../desktop/static'
},
// 路径修改为相对当前目录
base: './'
})
然后重新打包一下。重新再Electron中运行一下，有的人似乎没啥问题了，有的人的可能直接显示的是个白板，就算不是白板，你只要点击几个路由跳转后，再刷新，也会是个白板。
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
// history: createWebHistory(import.meta.env.BASE_URL),
// 修改路由模式为hash路由
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
})
export default router
Electron的入门教程最近已经整理好了，需要看基础部分的可以参考：electron入门教程
