人工智能桌面对话系统
- 参考视频
- 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
npm install -D vite@latest 更新到最新版本
npm install -D typescript@latest 更新到最新版本
npm install -D @typescript-eslint/eslint-plugin@latest 更新到最新版本
npm install -D @typescript-eslint/parser@latest 更新到最新版本
npm install -D eslint@latest 更新到最新版本
npm install -D eslint-plugin-import@latest 更新到最新版本
- 代码修改 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
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
