一站式解決方案！Electron、Vite和Vue 3助你打造功能豐富桌面應(yīng)用
背景
結(jié)合Electron Forge、Vite和Vue 3，你可以快速構(gòu)建功能豐富的跨平臺(tái)桌面應(yīng)用程序，盡管你可能只懂web開(kāi)發(fā)，你一樣可以輕松的開(kāi)發(fā)出各式各樣的桌面應(yīng)用。而且Vite的快速熱更新能力和Vue 3的高效性能，加速了開(kāi)發(fā)周期，使得開(kāi)發(fā)者能夠更快地迭代和測(cè)試應(yīng)用。很多vue3的UI可以使用，例如本文選用的arco-design，這就是站在巨人肩膀之上。廢話不多說(shuō)，進(jìn)入正題。本文的所有代碼，已經(jīng)上傳github,如果使用，可以直接拿去。而且作者會(huì)持續(xù)更新它。
Electron+Forge+Vite
Electron Forge官方提供了一個(gè)腳手架，且自帶Vite模版。
npm init electron-app@latest my-new-app -- --template=viteVue3
添加vue依賴(lài)
npm install --save vue修改Vite配置
腳手架生成的Vite配置文件有三個(gè)，分別是vite.main.config.mjs、vite.reload.config.mjs和vite.renderer.config.mjs。這里修改vite.renderer.config.mjs如下。
import { defineConfig } from 'vite';
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
}
}
});index.html中加入注入口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/renderer/main.js"></script>
</body>
</html>renderer/main.js中加入啟動(dòng)代碼
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';
import router from './router';
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
legacy: false, // 如果你使用 Composition API（推薦），請(qǐng)將legacy設(shè)置為false
locale: 'zh', // 默認(rèn)語(yǔ)言環(huán)境
messages: {
en: {
hello: 'Hello',
welcome: 'Welcome to our app!',
},
zh: {
hello: '你好',
welcome: '歡迎來(lái)到我們的應(yīng)用！',
},
},
});
createApp(App).use(i18n).use(router).use(ArcoVue,{}).use(ArcoVueIcon).mount('#app');啟動(dòng)
在package.json中應(yīng)該有如下配置，沒(méi)有就加進(jìn)去。
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},在項(xiàng)目根目錄下運(yùn)行如下命令啟動(dòng)項(xiàng)目。
npm start
啟動(dòng)日志
應(yīng)用頁(yè)面
應(yīng)用打包：
npm run make
打包后程序
點(diǎn)擊intel-fun-app便可以啟動(dòng)應(yīng)用。
本項(xiàng)目包含了國(guó)際化、路由的功能。之后會(huì)更新諸如狀態(tài)保存，api調(diào)用等功能。
開(kāi)發(fā)過(guò)程的問(wèn)題
問(wèn)題一
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>在vite.renderer.config.js文件中配置resolve.alias。
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
}
}
});問(wèn)題二
問(wèn)題描述
在vite.renderer.config.js文件中配置resolve.alias。
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
}
}
});git代碼地址：
https://github.com/dongluyang/intel-desktop-app.git。
