Develop and build electron project with vite and vue3
$ yarn create vite-app project-name
$ cd project-name
$ yarn add vitetron --dev
$ yarn add electron --dev
$ yarn add electron-builder --dev
$ yarn add esbuild --dev
Add background.ts
at the ./src folder
Set the file's content with:
import { app, BrowserWindow } from "electron";
let win;
app.on("ready", () => {
win = new BrowserWindow();
vitetron.load(win, "index.html"); //vitetron will be injected automaticly.
});
add scripts to your package.json
"scripts": {
"start": "vitetron start",
"release": "vitetron release"
}
run yarn start
to develope,yarn release
for build
Add vitetron.config.js
at the root of the project
Set the file's content with
module.exports = {
main: "./src/background.ts",
build: {
appId: "com.xland.app",
productName: "ViteElectron示例",
},
env: {
dev: {
SERVICE_BASE_URL: "https://dev.yourdomain.site",
},
test: {
SERVICE_BASE_URL: "https://test.yourdomain.site",
},
release: {
SERVICE_BASE_URL: "https://release.yourdomain.site",
},
},
};
The entry file of the main process,.js
and .ts
file are supported
Do not set directories
for the config
The customized definition of process.env
主进程可以调试
vitetron 有 TS 的类型
vue-cli 移除了哪些依赖
测试一下包含外部引用的主进程入口程序
默认支持.js 和.ts 的入口文件
尽量把需要的库都给它装好
自动创建 script 命令
test on mac
启动时传递额外的参数给 electron
注入的脚本,怎么编译
把 win.loadURL shake 掉一个分支