基于 vite2 + vue3 +electron 搭建窗口应用

随着vite2和vue3的兴起，前端打包速度快的飞起。因为个人之前一直使用.net 平台的winform做窗体，UI就很low，所以就想尝试一下使用electron来进行窗体的开发。毕竟也是跨平台的。

但是使用的过程总是磕磕绊绊，不过功夫不负有心人还是成功了。记录一下从0搭建的过程免得后人走弯路。

既然是使用vite2 + vue3了就要创建一个web项目。

# 这里使用的yarn ，使用npm和pnpm的小伙伴要用不同的命令

yarn create vite my-form-web-app

然后安装electron

yarn add electron --registry=https://registry.npm.taobao.org

等创建完成之后，需要进行一点点的修改，在package.json文件中增加两行，这里很关键！！！

{
    "name":"my-form-web-app"
    "main": "main.js",
	"homepage": "./"
}

然后在项目根目录下新建main.js文件，写一下electron app onready事件。创建electron窗体的配置我这里新建一个文件，其实这里分不分开都是一样的。

另外这里要安装一个npm包，名字叫做electron-is-dev，是检测electron是否在开发环境下，更详细的使用可以去看一下这个包的文档

www.npmjs.com/package/ele…

装这个包是因为我看好多教程都是加载打包后的文件，但是在实际开发过程中需要很多次运行，所以就不用多次打包了。只需要在项目上线时进行一次打包就可以了。

const { app, Menu } = require('electron');
const isDev = require('electron-is-dev');
const App = require('./src/utils/App.js');
const path = require('path');

const PORT = process.env.VITE_PORT || 3000;

app.on('ready', () => {
    const appConfig = {
        width: 1440,
        height: 768,
    };
    const url = isDev
        ? `http://localhost:${PORT}`
        : `file://${path.join(__dirname, './index.html')}`;
    let Form = new App(appConfig, url);
    Form.on('closed', () => {
        Form = null;
    });
    Menu.setApplicationMenu(null);
});

AppWindow.js

const { BrowserWindow } = require('electron');

class App extends BrowserWindow {
    constructor(config, urlLocation) {
        const basicConfig = {
            webPreferences: {
                contextIsolation: false,
                nodeIntegration: true,
                enableRemoteModule: true,
                nodeIntegrationInWorker: true,
            },
            show: false,
        };
        const finalConfig = {...config };
        super(finalConfig);
        this.webContents.openDevTools();
        this.loadURL(urlLocation);
        this.once('ready-to-show', () => {
            this.show();
        });
    }
}

module.exports = App;

这里设置完以后在vite.config.js修改一下配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

const PORT = process.env.PORT || 3000;

export default defineConfig({
    server: {
        port: PORT,
    },
    build: {
        outDir: 'build',
    },
    base: './',
    plugins: [vue()],
});

最后运行一下yarn start，就可以愉快的使用了