更新记录

1.0.0（2025-08-14） 下载此版本

第一个版本发布，与普遍的国际化不同，这是一个页面级动态加载语言包的示例。

平台兼容性

uni-app(4.76)

其他

在 uni-app 中实现动态加载语言包，以便优化性能，避免一次性加载所有语言资源，是基于 Vue3、TypeScript、 Element Plus、Vite、Pinia、Axios技术的实现方案，结合 vue-i18n 实现按页面按需加载语言包， 带有首页、登录、注册、用户中心四个页面，能打开SVG资源。具体操作步骤如下：

1. 导入项目至HBuilder X中

2. 在终端安装js依赖

npm install

3. 在HBuilder X运行

选择以下任一方式： 3.1 点击菜单：运行-->运行到浏览器-->Edge或Chrome或Firefox。 3.2 也可点击菜单：运行-->运行到内置浏览器 3.3 在终端执行以下命令：

# 运行到H5
npm run dev:h5

# 运行到小程序
npm run dev:mp-weixin

# 运行到APP
npm run dev:app

功能特点

1. ✅ 技术栈完整：Vue3 + TypeScript + Element Plus + Vite + Pinia
2. ✅ API接口：完整的用户登录、注册、获取信息接口
3. ✅ 国际化支持：按页面动态加载语言包
4. ✅ 页面完整：首页、登录、注册、用户中心
5. ✅ SVG支持：自定义SvgIcon组件
6. ✅ 状态管理：Pinia管理用户状态和语言状态
7. ✅ 响应式设计：适配多端
8. ✅ 类型安全：完整的TypeScript类型定义

实现说明

1. 项目结构

   uni-app-project/
   ├── src/
   │   ├── api/
   │   │   ├── index.ts
   │   │   └── user.ts
   │   ├── assets/
   │   │   └── svg/
   │   │       ├── home.svg
   │   │       ├── user.svg
   │   │       └── logo.svg
   │   ├── components/
   │   │   └── SvgIcon.vue
   │   ├── composables/
   │   │   └── useI18n.ts
   │   ├── locales/
   │   │   ├── en.ts
   │   │   ├── zh.ts
   │   │   └── index.ts
   │   ├── pages/
   │   │   ├── index/
   │   │   │   ├── index.vue
   │   │   │   └── locale/
   │   │   │       ├── en.ts
   │   │   │       └── zh.ts
   │   │   ├── login/
   │   │   │   ├── login.vue
   │   │   │   └── locale/
   │   │   │       ├── en.ts
   │   │   │       └── zh.ts
   │   │   ├── register/
   │   │   │   ├── register.vue
   │   │   │   └── locale/
   │   │   │       ├── en.ts
   │   │   │       └── zh.ts
   │   │   └── user/
   │   │       ├── user.vue
   │   │       └── locale/
   │   │           ├── en.ts
   │   │           └── zh.ts
   │   ├── stores/
   │   │   ├── user.ts
   │   │   └── language.ts
   │   ├── styles/
   │   │   └── main.scss
   │   ├── types/
   │   │   └── index.ts
   │   ├── utils/
   │   │   ├── request.ts
   │   │   └── index.ts
   │   ├── App.vue
   │   ├── main.ts
   │   ├── manifest.json
   │   ├── pages.json
   │   └── uni.scss
   ├── index.html
   ├── package.json
   ├── tsconfig.json
   ├── vite.config.ts
   └── README.md

2. 语言包结构设计

   • 按功能划分为 基础语言包（置于src\locales）和 页面语言包（位于src\pages\xxxx\locale中，xxxx为某个页面名称，下同）
   • 每种语言单独存放为一个ts文件（如zh.ts、en.ts）

3. 动态加载逻辑

   • 核心文件为src\composables\useI18n.ts。
   • 在各个页面中通过await loadPageLocale('xxxx')来加载页面语言包。
   • 使用 t('key')访问翻译文本

这种实现方式既减少了初始加载体积，又能保证多语言功能的完整性，非常适合 uni-app 这类需要考虑性能的跨端应用。