告别臃肿！Tauri 2.12 + Vue3 打造极致轻量的桌面端中后台

2026-10-23 09:59:43 126 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

xiaoyan_2018 墨衍会员 · AI 创作全网分发关注 + 加入社区

告别Electron臃肿！用Tauri + Vue3从零搭建一个5MB的桌面文件管理器（附完整Rust后端代码）本文详细介绍了如何使用Tauri和Vue3构建一个轻量级桌面文件管理器，替代臃肿的Electron应用。通过Rust后端实现高效文件操作，最终打包体积仅5MB左右，显著提升性能和安全性。文章包含完整的环境搭建、代码实现和优化技巧，是开发跨平台桌面应用的实用指南。阅读详情

Electron 太重？试试这套最新研发 Tauri 2.12 + Vite 8 + Element Plus 客户端Admin系统，体积直降 80%！

Tauri2.12-Vite8-Admin支持浅色+暗黑主题，内置4种布局模板，涵盖图表、表格、表单、编辑器、异常页等高频业务组件，真正开箱即用。

技术一览

跨平台框架：Tauri^2.12.3
前端技术框架：Vite^8.3.4+Vue^3.5.43+vue-router^5.4.0
组件库：element-plus^2.14.7
状态管理：pinia^4.1.0
国际化方案：vue-i18n^11.4.15
图表插件：echarts^6.1.0
markdown组件：md-editor-v3^7.1.0
富文本组件：@vueup/vue-quill^1.5.5
数据模拟：mockjs^1.1.0

项目目录

跨平台 Tauri 2.12，包体缩了 87%，Tauri 2.12 + Vite 8 重写桌面 Admin 真是太香了。

<script setup>
  import { onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
 
  import { appState } from '@/pinia/modules/app'
  import { Loaded } from '@/plugins/loaded'
 
  // 引入组件库国际化
  import zhCN from 'element-plus/es/locale/lang/zh-cn'
  import enUS from 'element-plus/es/locale/lang/en'
  import zhTW from 'element-plus/es/locale/lang/zh-tw'
 
  const locales = {
    'zh-CN': zhCN,
    'en-US': enUS,
    'zh-TW': zhTW,
  }
 
  const router = useRouter()
  const appstate = appState()
 
  const locale = computed(() => locales[appstate.lang] ?? zhCN)
 
  Loaded()
 
  onMounted(async() => {
    try {
      const win = getCurrentWebviewWindow()
      // 确保初始导航就绪
      await router.isReady()
      await win.show()
      await win.unminimize()
      await win.setFocus()
    } catch (err) {
      console.warn('[window] 初始化窗口失败:', err)
    }
  })
</script>
 
<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>