Vite+Vue3+Ts+Electorn构建桌面应用<1>

1.Vite创建应用

Vite 需要 Node.js 版本 14.18+，16+

npm create vite@latest

然后按照提示操作即可！

完成之后npm run dev

看到下面页面就算成功了

2.安装electron

electron中文官网网址

npm install electron@latest可以安装 单速度太慢 国内建议使用npm淘宝镜像安装

第一步：全局安装cnpm

npm install cnpm -g --registry=http://registry.npm.taobao.org

第二步

cnpm i -D electron@latest

3. 安装vite-plugin-electron插件

cnpm install vite-plugin-electron -D

配置vite.config.ts文件使用vite-plugin-electron插件并配置electron入口文件

1.在根目录创建electron/main.ts

// electron / main.ts
import { app, BrowserWindow } from 'electron';
import { join } from 'path';

const createWindow = () => {
    const win = new BrowserWindow({
        width: 960,
        height: 600,
        webPreferences: {
            nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式
            contextIsolation: false, // 设置是否启用上下文隔离模式。
        },
    });

    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL);
    } else {
        win.loadFile(join(__dirname, 'index.html'));
    }
    console.log("中文！！");
};

app.whenReady().then(createWindow);

2.设置需要编辑的文件入口

如下图

4.配置package.json的入口地址

由于electron主进程是使用的node环境，而默认情况下，Node.js 使用的是 CommonJS 模块规范，而 import 语句属于 ECMAScript 模块规范，两者不兼容。所以需要使用编译为 CommonJS 规范的dist-electron/main.js作为main属性的入口文件，否则会报es6语法错误。

1.type删除

2.添加main入口

5.控制台中文乱码问题

chcp 65001 是 Windows 系统下的一个命令，用于将控制台的代码页设置为 UTF-8 编码。在默认情况下，Windows 控制台使用的是 GBK 或者其他本地编码，导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。 使用 chcp 65001 命令可以将控制台的代码页设置为 UTF-8 编码，以便正确显示中文等非 ASCII 字符。

此时npm run dev

好了，一个vue3+ts+Electron的demo就好了