后来想用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入门教程