基于electron25+vite4+vue3仿制chatgpt客户端聊天模板ElectronChatGPT。
electron-chatgpt 使用最新桌面端技术Electron25.x结合Vite4.x全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持经典+分栏两种布局、暗黑+明亮主题模式,集成electron封装多窗口及通讯功能。
基于electron最新版本融合vite4.x技术搭建模仿chatgpt桌面端程序。
如果对electron+vite4创建跨端应用及多开窗口感兴趣,可以去看看之前的这两篇分享文章。
https://www.cnblogs.com/xiaoyan2017/p/17436076.html
https://www.cnblogs.com/xiaoyan2017/p/17442502.html
随着electron快速迭代更新,加上vite极速编译,二者配合创建的应用运行速度超快。
考虑到项目比较轻量级,所以采用自研vue3组件库ve-plus。
关于veplus组件库这里不作过多介绍,之前有过一篇分享文章,大家可以去看看。
https://www.cnblogs.com/xiaoyan2017/p/17170454.html
项目整体大致分为顶部导航工具栏+左侧会话记录/操作链接+右侧会话区/编辑框等模块。
根目录下新建 electron-main.js 作为主进程入口文件。 /** const { app, BrowserWindow } = require('electron') const MultiWindow = require('./src/multiwindow') // 屏蔽安全警告 const createWindow = () => { app.whenReady().then(() => { app.on('window-all-closed', () => { 使用electron的vite插件,在vite.config.js中配置入口。 import { defineConfig, loadEnv } from 'vite' export default defineConfig(({ command, mode }) => { return { } 需要注意:由于目前Electron 尚未支持 "type": "module",需要在package.json中去掉,并且配置 "main": "electron-main.js", 入口。 创建窗口的时候配置 frame: false 参数,创建的窗口则没有系统顶部导航栏及边框。拖拽区域/最大化/最小化及关闭按钮均需要自定义操作。 通过设置css3属性 -webkit-app-region: drag ,则可对自定义区域进行拖拽操作,设置后按钮/链接点击则会失效,这时通过对按钮或链接设置-webkit-app-region: no-drag就可恢复事件响应。 不过设置-webkit-app-region: drag,点击鼠标右键,会出现上图系统菜单,经过一番调试,windows下可以暂时通过如下方法屏蔽右键菜单。 // 屏蔽系统右键菜单 }) 在components/titlebar目录自定义工具栏条。 control.vue自定义最大化/最小化/关闭按钮
在 index.vue 中引入 control.vue 操作按钮,并支持自定义左侧、标题等功能。 手机扫一扫 移动阅读更方便 你可能感兴趣的文章
<div class="ve\_\_layout-body flex1 flexbox">
<!-- //侧边栏 -->
<div class="ve\_\_layout-menus flexbox" :class="{'hidden': store.config.collapse}">
<aside class="ve\_\_layout-aside flexbox flex-col">
<ChatNew />
<Scrollbar class="flex1" autohide size="4" gap="1">
<ChatList />
</Scrollbar>
<ExtraLink />
<Collapse />
</aside>
</div>
<!-- //主体区域 -->
<div class="ve\_\_layout-main flex1 flexbox flex-col">
<Main />
</div>
</div>
</div>
Electron主进程入口
* 主进程入口
* @author YXY
*/
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
let win = new MultiWindow()
win.createWin({isMainWin: true})
}
createWindow()
app.on('activate', () => {
if(BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
if(process.platform !== 'darwin') app.quit()
})
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'
const viteEnv = loadEnv(mode, process.cwd())
const env = parseEnv(viteEnv)
plugins: [
vue(),
electron({
// 主进程入口文件
entry: 'electron-main.js'
})
],/\*构建选项\*/
build: {
/\* minify: 'esbuild', // 打包方式 esbuild(打包快)|terser
chunkSizeWarningLimit: 2000, // 打包大小警告
rollupOptions: {
output: {
chunkFileNames: 'assets/js/\[name\]-\[hash\].js',
entryFileNames: 'assets/js/\[name\]-\[hash\].js',
assetFileNames: 'assets/\[ext\]/\[name\]-\[hash\].\[ext\]',
}
} \*/
// 如果打包方式是terser,则配置如下
/\* minify: "terser",
terserOptions: {
compress: {
// 去掉所有console和debugger
// drop\_console: true,
// drop\_debugger: true,
drop\_console: command !== 'serve',
drop\_debugger: command !== 'serve',
//pure\_funcs:\['console.log'\] // 移除console.log
}
} \*/
},
esbuild: {
// 打包去除 console.log 和 debugger
drop: env.VITE\_DROP\_CONSOLE && command === 'build' ? \["console", "debugger"\] : \[\]
},
/\*开发服务器选项\*/
server: {
// 端口
port: env.VITE\_PORT,
// ...
},
resolve: {
// 设置别名
alias: {
'@': resolve(\_\_dirname, 'src'),
'@assets': resolve(\_\_dirname, 'src/assets'),
'@components': resolve(\_\_dirname, 'src/components'),
'@views': resolve(\_\_dirname, 'src/views')
}
}
})Electron自定义无边框窗口工具栏
win.hookWindowMessage(278, () => {
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100)return true