Electron+Vite+Vue 3最简单的配置使用Electron Forge官方脚手架创建项目 Electron文

使用Electron Forge官方脚手架创建项目

Electron文档：www.electronjs.org/zh/docs/lat…

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

查看原文：智灵谷