Electron 40 + Vue 3.5 + Vite 7 + Typescript 5 + Electron Forge 7（template=vite-t

人工智能桌面对话系统

• 参考视频
• Electron鸿蒙化【待实践】

新建项目

# 参考视频使用
npm init electron-app@latest vchat -- --template=vite-typescript

# 实际使用，参考官网最新命令【https://www.electronforge.io/】【2026/01/22】
npx create-electron-app@latest vchat --template=vite-typescript
cd vchat
npm run start

# 设置 .npmrc【C:\Users\zhangsan\.npmrc】

```npmrc
registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

安装 Vue，工具更新到最新版本 vite typescript eslint

npm install vue
npm install -D @vitejs/plugin-vue
npm install --save-dev @vitejs/plugin-vue

【BBBBBug】【有助于vue正常运行(import vue from '@vitejs/plugin-vue';)，vite.renderer.config.ts配置中有使用】
D:\workspace-front\vchat2\vite.renderer.config.ts
2:17  error  Unable to resolve path to module '@vitejs/plugin-vue'  import/no-unresolved
这个错误解决方案，将【AAAAA】升级到最新版本；
怪得很，有时候报错了，也可以正常运行程序 npm run start；
可能和环境有关，删除node_modules package-lock.json，重新装看看。
哈哈哈，搞笑，pnpm安装，报错了，可以正常运行。不用将【AAAAA】升级到最新版本

问了AI，夸克-Qwen3-Max，回答如下
有时候 `node_modules` 损坏或未安装完整，也会导致解析失败。
rm -rf node_modules package-lock.json
npm install
必要时清理并重装依赖。

【AAAAA】
npm install -D vite@latest 更新到最新版本
npm install -D typescript@latest 更新到最新版本
npm install -D eslint@latest 更新到最新版本
npm install -D eslint-plugin-import@latest 更新到最新版本
npm install -D @typescript-eslint/parser@latest 更新到最新版本
npm install -D @typescript-eslint/eslint-plugin@latest 更新到最新版本


【package.json 升级到最新版本】
"devDependencies": {
    "@electron-forge/cli": "^7.11.1",
    "@electron-forge/maker-deb": "^7.11.1",
    "@electron-forge/maker-rpm": "^7.11.1",
    "@electron-forge/maker-squirrel": "^7.11.1",
    "@electron-forge/maker-zip": "^7.11.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
    "@electron-forge/plugin-fuses": "^7.11.1",
    "@electron-forge/plugin-vite": "^7.11.1",
    "@electron/fuses": "^1.8.0",
    "@types/electron-squirrel-startup": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^8.53.1",
    "@typescript-eslint/parser": "^8.53.1",
    "@vitejs/plugin-vue": "^6.0.3",
    "electron": "40.0.0",
    "eslint": "^9.39.2",
    "eslint-plugin-import": "^2.32.0",
    "typescript": "^5.9.3",
    "vite": "^7.3.1"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1",
    "vue": "^3.5.27"
  }

• 代码修改 tsconfig.json【有助于vue正常运行(import vue from '@vitejs/plugin-vue';)，vite.renderer.config.ts配置中有使用】

"module": "ESNext",
"moduleResolution": "bundler",

• Electron 40 + Vue 3.5 + Vite 7 + Electron Forge + @electron-forge/plugin-vite 配置文件代码编写 vite.base.config.ts、vite.main.config.ts、vite.preload.config.ts、vite.renderer.config.ts【夸克：QWen3-Max】

• 【vite.base.config.ts】

// vite.base.config.ts
import type { UserConfig } from 'vite';

const baseConfig: UserConfig = {
  resolve: {
    // 可选：别名配置（如 @ -> src/renderer）
    alias: {
      '@': '/src/renderer',
    },
  },
  define: {
    // 全局定义（可选）
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
};

export default baseConfig;

• 【vite.main.config.ts】

// vite.main.config.ts
import { builtinModules } from 'node:module';
import { defineConfig } from 'vite';
import baseConfig from './vite.base.config';

// 获取 Node.js 内置模块（兼容 node: 协议）
const externalBuiltins = [
    ...builtinModules,
    ...builtinModules.map(m =>`node:${m}`),
];
export default defineConfig({
  ...baseConfig,
  build: {
    outDir: 'dist/main',
    lib: {
      entry: 'src/main.ts',
      formats: ['cjs'],
      fileName: () => '[name].cjs',
    },
    rollupOptions: {
      external: [
        'electron',
        // 排除 Node.js 内置模块和 Electron 模块
        ...externalBuiltins,
        // 可选：排除原生模块（如 fsevents 在 macOS 上）
        'fsevents',
      ],
      output: {
        format: 'cjs',
        entryFileNames: '[name].cjs',
      },
    },
    minify: false, // 主进程通常不压缩
    sourcemap: true,
  },
  plugins: [],
});

• 【vite.preload.config.ts】

// vite.preload.config.ts
import { defineConfig } from 'vite';
import baseConfig from './vite.base.config';

export default defineConfig({
  ...baseConfig,
  build: {
    outDir: 'dist/preload',
    lib: {
      entry: 'src/preload.ts',
      formats: ['cjs'],
      fileName: () => 'index.cjs',
    },
    rollupOptions: {
      external: ['electron'],
      output: {
        format: 'cjs',
        entryFileNames: '[name].cjs',
      },
    },
    minify: false,
    sourcemap: true,
  },
  plugins: [],
});

• 【vite.renderer.config.ts】

// vite.renderer.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import baseConfig from './vite.base.config';

export default defineConfig({
  ...baseConfig,
  plugins: [vue()],
  build: {
    outDir: 'dist/renderer',
    emptyOutDir: true,
    rollupOptions: {
      input: 'index.html', // 假设你的 index.html 在项目根目录
    },
  },
  server: {
    // 开发服务器配置（仅用于开发）
    port: 3000,
    strictPort: true,
    host: true,
    // 禁用 HMR 的 WebSocket？不需要，Vite 默认支持
  },
});

• 代码修改 package.json (入口文件修改，和vite.main.config.ts中的输出文件对应一样)

"main": "dist/main/main.cjs",

• 新建文件 ./src/App.vue

<template>
    <h1>Vue App</h1>
</template>
<script setup>
    console.log('App component loaded');
</script>

• 修改文件 ./src/renderer.ts

import './index.css';
import {createApp} from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

• 修改文件 ./index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>

• 运行程序，查看效果

npm run start

• 查看版本 Node，Chromium，V8 Engine【npm run start，运行程序，在控制台查看】

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  // 获取版本信息
  console.log('Electron Version:', process.versions.electron);
  console.log('Node.js Version:', process.versions.node);
  console.log('Chromium Version:', process.versions.chrome);
  console.log('V8 Engine Version:', process.versions.v8);
  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(
      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`),
    );
  }

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

Tailwindcss 安装

【tailwindcss@3.4.6】安装【未成功安装，建议使用最新版安装】

# 1. 安装 tailwindcss
npm install -D tailwindcss@3.4.6 postcss autoprefixer

# 2. 生成配置文件 tailwind.config.js、postcss.config.js
npx tailwindcss init -p

• 代码修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 代码修改 ./src/index.css

/* 清空代码，替换 */
@tailwind base;
@tailwind components;
@tailwind utilities;

• vscode 插件安装【Tailwind CSS IntelliSense】

【tailwindcss@4.1.18】安装

【tailwindcss@4.1.18】目前最新版【2026/01/22】
npm install tailwindcss @tailwindcss/vite