使用Electron Forge官方脚手架创建项目
Electron文档：https://www.electronjs.org/zh/docs/latest/
Electron Forge文档：https://www.electronforge.io/
npm init electron-app@latest my-app -- --template=vite
可选模板
- webpack
- webpack-typescript
- vite
- vite-typescript
安装VUE
npm install --save vue
修改Vite配置
脚手架生成的Vite配置文件有三个，分别是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'
import { resolve } from 'path'
// https://vitejs.dev/config
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
}
},
});
修改index.html文件
因为Electron Forge入口文件是main.js, vue默认也是main.js, 这里把vue主文件改为其它名称
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/vue_main.js"></script>
</body>
</html>
启动
在package.json中默认会有如下配置。
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
运行 npm run start 即可启动
打包
npm run make
