基于 Vue3 + TypeScript + uni-app 的多端企业级应用架构设计与实践

摘要：本文详细介绍了一个基于 Vue3、TypeScript、uni-app 构建的多端企业级应用的架构设计。文章从项目技术选型、目录结构设计、核心模块实现、工程化配置等多个维度，全面阐述了如何搭建一个可维护、可扩展、高性能的跨平台应用架构。通过本文，读者可以学习到企业级前端项目的最佳实践和架构思路。

一、引言

随着移动互联网的发展，企业对应用的需求已经从单一平台向多平台扩展。如何在保证开发效率的同时，实现一套代码多端运行，成为了前端团队面临的重要挑战。本文基于实际项目经验，分享了一套完整的企业级 uni-app 应用架构解决方案。

1.1 技术背景

uni-app：使用 Vue.js 开发所有前端应用的框架，一套代码可发布到 iOS、Android、Web、以及各种小程序平台
Vue3：采用 Composition API，提供更好的 TypeScript 支持和性能优化
TypeScript：强类型语言，提升代码可维护性和开发体验
Vite：下一代前端构建工具，提供极速的开发服务器启动和热更新

1.2 项目特点

✅ 多端支持：支持 H5、微信小程序、APP（iOS/Android）等多端部署
✅ 企业级架构：完善的请求拦截、权限控制、状态管理、错误处理机制
✅ 高度可配置：基于环境变量的多环境配置，支持单体/微服务架构自动适配
✅ 安全可靠：请求参数加密传输，支持国密算法
✅ 工程化完善：ESLint + Prettier + Husky 代码规范，自动化提交检查

二、技术栈与工程配置

2.1 核心技术栈

{

\”framework\”: \”Vue 3.4.21\”,
\”language\”: \”TypeScript 4.7.4\”,
\”buildTool\”: \”Vite 5.2.8\”,
\”crossPlatform\”: \”uni-app 3.0.0\”,
\”stateManagement\”: \”Pinia 2.0.36\”,
\”http\”: \”luch-request 3.1.1\”,
\”uiFramework\”: \”uView UI\”,
\”css\”: \”TailwindCSS 3.1.8\”
}

2.2 开发环境要求

{

\”node\”: \”>=18.0.0\”,
\”npm\”: \”>=8.0.0\”,
\”yarn\”: \”>=1.22.0\”
}

2.3 Vite 配置要点

// vite.config.ts 核心配置
export default defineConfig({

plugins: [
uni(), // uni-app 官方插件
viteCompression(), // Gzip 压缩
weappTailwindcssDisabled ? undefined : vwt() // 小程序 TailwindCSS 适配
],

server: {

port: 8088,
proxy: {

\’^/api\’: {

target: env.VITE_APP_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\\/api/, \’\’)
}
}
},

build: {

minify: \’terser\’,
terserOptions: {

compress: {

drop_console: true, // 生产环境移除 console
drop_debugger: true
}
}
}
})

配置亮点：

支持多环境配置（.env.development、.env.production）
自动代理配置，解决开发环境跨域问题
生产环境代码压缩优化
针对小程序平台的 TailwindCSS 特殊处理

三、项目目录结构设计

3.1 整体目录结构

project-web-uniapp/
├── src/
│ ├── api/ # API 接口层
│ │ ├── admin/ # 后台管理相关接口
│ │ ├── bpm/ # 流程管理接口
│ │ ├── expense/ # 费用管理接口
│ │ └── … # 其他业务模块
│ ├── components/ # 公共组件库
│ ├── enums/ # 枚举定义
│ ├── hooks/ # 组合式函数
│ ├── pages/ # 页面文件
│ ├── plugins/ # 插件配置
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── styles/ # 全局样式
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ ├── uni_modules/ # uni-app 扩展模块
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── pages.json # 页面配置
├── typings/ # 全局类型声明
└── .env* # 环境配置文件

3.2 设计原则

（1）分层架构

┌─────────────────────────────────────┐
│ Pages (视图层) │
├─────────────────────────────────────┤
│ Components (组件层) │
├─────────────────────────────────────┤
│ Hooks (逻辑层) │
├─────────────────────────────────────┤
│ Stores (状态管理层) │
├─────────────────────────────────────┤
│ API (数据接口层) │
├─────────────────────────────────────┤
│ Utils (工具层) │
└─────────────────────────────────────┘

（2）模块化设计

按业务模块划分：如 expense（费用）、bpm（流程）、admin（管理）
功能内聚：每个模块包含完整的 API、类型定义、业务逻辑
低耦合：模块间通过统一接口通信，避免直接依赖

（3）组件分类

// components/ 目录包含以下公共组件：
– approval–process/ // 审批流程组件
– avatar–upload/ // 头像上传组件
– filter–section/ // 筛选组件
– image–upload/ // 图片上传组件
– person–selector/ // 人员选择器
– project–selector/ // 项目选择器
– status–tag/ // 状态标签组件
– travel–dialog/ // 差旅对话框组件

四、核心模块设计与实现

4.1 请求封装模块

（1）基础配置

// src/utils/request.ts
const http = new Request({

baseURL: appConfig.IS_H5 ? `/api` : `${

appConfig.APP_BASE_URL}/api`,
timeout: 8000,
method: \’GET\’,
header: {

Accept: \’application/json\’,
\’Content-Type\’: \’application/json;charset=UTF-8\’
},
custom: options // 自定义配置项
})

（2）请求拦截器

http.interceptors.request.use((config: any) => {

// 1. 添加版本标识
config.header[\’VERSION\’] = \’A\’

// 2. 添加Authorization Token
const token = getToken()
if (token && !config.header?.skipToken)</

基于 Vue3 + TypeScript + uni-app 的多端企业级应用架构设计与实践