弃用 vue-i18n？只用 uView Pro 我照样做国际化！

一. uView Pro 全面开启多语言

uView Pro 是一款基于 uni-app 和 Vue 3开发的跨平台UI组件库，致力于为开发者提供高质量、易用的组件解决方案。支持H5、小程序、Android、iOS、鸿蒙等多端部署，开箱即用，性能优异。

uView Pro 演示应用已经正式上架鸿蒙应用商店，重要显示均支持国际化，欢迎体验：点击体验

随着越来越多的应用需要"走向世界"，为不同国家和地区的用户服务，国际化（i18n）成了开发中必不可少的一环。uView Pro一直希望开发者用起来更方便、更顺手，早在几个月前，uView Pro就已经开始了将所有组件i18n化的工作。

目前，很高兴地告诉大家：uView Pro全系 80+ 组件现在都支持国际化了！有了这个功能，可以更简单地让应用支持多种语言，不止组件，整个项目也可以使用，完全可以不用 vue-i18n 了。

官网：uView Pro

快速启动项目：uView Pro Starter

二. uView Pro 的国际化

uView Pro 的国际化功能基于Vue 3的响应式系统设计，也参考vue-i18n的实现方式，具有以下核心特性：

1. 核心特性

1. 内置双语支持：开箱即用地支持中文和英文，可无限拓展其他语言
2. 灵活配置：支持全局配置和组件级配置
3. 响应式更新：语言切换时组件自动更新显示
4. 持久化存储：用户选择的语言偏好会自动保存
5. 扩展性强：轻松添加新的语言包或修改现有文案
6. 组件覆盖全：所有组件的交互文案都支持国际化

2. 支持的组件类型

uView Pro的国际化支持涵盖了所有常用组件，包括但不限于：

• 基础组件：Button、Input、Modal、Picker等
• 表单组件：Form、Select、Upload、VerificationCode等
• 数据展示：Calendar、Pagination、Loadmore等
• 交互组件：ActionSheet、Keyboard、Search等
• 状态组件：Empty、NoNetwork、CountDown等

提示：uView Pro内置80+常用组件，目前已经全部支持国际化。如有遗漏，请提交issue，我会及时修复。

三. 快速开始：5分钟上手国际化

第一步：在main.ts中全局配置

最简单的使用方式是在应用入口文件中配置国际化：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

const app = createApp(App)

// 配置国际化（使用中文）
app.use(uViewPro, {
  locale: 'zh-CN'  // 或 'en-US'，默认为 'zh-CN'
})

// 如果需要更详细的配置
app.use(uViewPro, {
  locale: {
    locales: [], // 自定义语言包数组
    defaultLocale: 'zh-CN' // 默认语言
  }
})

第二步：在组件中使用

你也可以在具体组件中配置国际化：

<template>
  <u-config-provider
    :locales="locales"
    :current-locale="currentLocale"
  >
    <!-- 你的应用内容 -->
    <u-modal v-model="show" :content="content"></u-modal> 
    <u-button @click="open"> 打开模态框 </u-button>
  </u-config-provider>
</template>

<script setup lang="ts">
import { useLocale } from 'uview-pro'

const { currentLocale, locales } = useLocale()
const show = ref<boolean>(false)
const content = ref<string>('东临碣石，以观沧海')

const open = () => {
    show.value = true
}
</script>

第三步：编程式切换语言

<script setup lang="ts">
import { useLocale } from 'uview-pro'

const { setLocale } = useLocale()

// 切换到英文
const switchToEnglish = () => {
  setLocale('en-US')
}

// 切换到中文
const switchToChinese = () => {
  setLocale('zh-CN')
}
</script>

四. 内置语言支持详解

1. 中文语言包 (zh-CN)

uView Pro内置了完整的中文语言包，覆盖所有组件的交互文案：

// 中文语言包示例
export default {
  name: 'zh-CN',
  actionSheet: {
    cancelText: '取消'
  },
  calendar: {
    confirmText: '确定',
    startText: '开始',
    endText: '结束',
    // ... 更多文案
  },
  modal: {
    confirmText: '确认',
    cancelText: '取消'
  }
  // ... 其他组件文案
}

2. 英文语言包 (en-US)

对应的中文语言包提供了完整的英文翻译：

// 英文语言包示例
export default {
  name: 'en-US',
  actionSheet: {
    cancelText: 'Cancel'
  },
  calendar: {
    confirmText: 'Confirm',
    startText: 'Start',
    endText: 'End',
    // ... 更多文案
  },
  modal: {
    confirmText: 'Confirm',
    cancelText: 'Cancel'
  }
  // ... 其他组件文案
}

部分中、英文字段对照：

以Calendar日历组件为例，对比如下：

五. 高级用法：深度定制国际化

支持将语言包进行深度定制，覆盖或添加新的语言包。

1. 部分覆盖内置语言包

有时候你可能需要调整某些组件的默认文案，以更好地符合你的业务场景。所以，如果你只需要修改部分文案，uView Pro 会通过合并的方式来覆盖：

// main.ts
app.use(uViewPro, {
  theme: themes,
  locale: {
    locales: [{
      name: 'zh-CN',
      modal: {
        confirmText: '好的',  // 自定义确认按钮文案
        cancelText: '算了'   // 自定义取消按钮文案
      },
      upload: {
        uploadText: '选择文件'  // 自定义上传文案
      }
    }],
    defaultLocale: 'zh-CN'
  }
})

2. 添加新的国际化语言

假设你需要为应用添加法语支持，你需要做以下几件事情：

添加法语文件

假设我们要为应用添加法语支持：

// 首先创建法语语言包文件
// src/locales/fr-FR.ts
export default {
  name: 'fr-FR', // 必须要有
  actionSheet: {
    cancelText: 'Annuler'
  },
  modal: {
    title: 'Avertissement',
    content: 'Contenu',
    confirmText: 'Confirmer',
    cancelText: 'Annuler'
  },
  calendar: {
    startText: 'Début',
    endText: 'Fin',
    confirmText: 'Confirmer',
    toolTip: 'Sélectionner une date',
    // ... 其他法语翻译
  },
  upload: {
    uploadText: 'Sélectionner une image',
    retry: 'Réessayer',
    overSize: 'Le fichier dépasse la taille autorisée',
    // ... 更多法语文案
  },
  // ... 继续添加其他组件的法语翻译
}

根据已有的中文语言包，将所有需要翻译的字段添加法语翻译。

在应用中集成新语言

// main.ts
import { createApp } from 'vue'
import uViewPro from 'uview-pro'
import frFR from './locales/fr-FR'

const app = createApp(App)

app.use(uViewPro, {
  theme: themes,
  locale: {
    locales: [frFR], // 添加法语语言包
    defaultLocale: 'fr-FR' // 设置默认语言为法语，为语言包中的name字段
  }
})

3. 语言切换功能

创建语言切换组件，示例：

<!-- LanguageSwitcher.vue -->
<template>
  <view class="language-switcher">
    <u-select
      v-model="selectedLocale"
      :options="localeOptions"
      @change="handleLocaleChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useLocale } from 'uview-pro'

const { setLocale, currentLocale, locales } = useLocale()

const selectedLocale = ref(currentLocale.value?.name || 'zh-CN')

const localeOptions = computed(() => {
  return locales.value.map(locale => ({
    label: locale.name,
    value: locale.name
  }))
})

const handleLocaleChange = (value: string) => {
  setLocale(value)
}
</script>

六. 组件级国际化使用

在项目中仍然可以以uView Pro内部hooks来使用国际化，也可以使用国际化如下：

1. 在具体组件中使用翻译

虽然uView Pro的组件会自动使用当前语言的文案，但你也可以在自定义组件中集成国际化：

<template>
  <view class="custom-component">
    <u-button @click="showMessage">
      {{ t('buttonText') }}
    </u-button>

    <u-modal v-model="showModal">
      <view class="modal-content">
        <text>{{ t('modalContent') }}</text>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useLocale } from 'uview-pro'

const { t } = useLocale('custom-component') // 指定组件命名空间
const showModal = ref(false)

const showMessage = () => {
  showModal.value = true
}

// 注意：需要在语言包中添加对应的文案
// custom-component.buttonText 和 custom-component.modalContent
</script>

如果你不用vue-i18n，完全可以借用uView Pro的内部Hook来实现项目级国际化！只需要追加固定的翻译字段即可。更加简便快捷

2. 使用内置组件命名空间

uView Pro的所有内置组件都有自己的命名空间，你可以直接使用：

import { useLocale } from 'uview-pro'

// 使用 actionSheet 组件的命名空间
const { t: actionSheetT } = useLocale('actionSheet')
const cancelText = actionSheetT('cancelText') // 等价于 t('actionSheet.cancelText')

// 使用 modal 组件的命名空间
const { t: modalT } = useLocale('modal')
const confirmText = modalT('confirmText') // 等价于 t('modal.confirmText')

// 使用 calendar 组件的命名空间
const { t: calendarT } = useLocale('calendar')
const startText = calendarT('startText') // 等价于 t('calendar.startText')

3. 动态参数替换

支持在翻译中使用动态参数：

const { t } = useLocale()

// 语言包中定义：'welcome': '欢迎您，{name}！'
// 语言包中定义：'itemsCount': '共 {count} 个项目'

const welcomeMessage = t('welcome', { name: '张三' })
// 输出："欢迎您，张三！"

const itemsMessage = t('itemsCount', { count: 25 })
// 输出："共 25 个项目"

更多hooks使用方式参考 uView Pro 官方文档

七. 配合vue-i18n实现项目级多语言切换

如果你已经在项目中使用vue-i18n，uView Pro可以完美配合，实现完整的多语言切换功能。这样既可以使用vue-i18n处理业务文案，也可以使用uView Pro处理组件文案。

1. 项目配置

首先在项目中配置vue-i18n：

// src/locales/index.ts
import { createI18n } from 'vue-i18n';

import zhHans from './langs/zh-Hans.json'; // 简体中文
import en from './langs/en.json'; // 英文

const messages = {
  'zh-Hans': zhHans,
  en,
};

// 自动检测用户语言
const getDefaultLocale = () => {
  try {
    const lang = uni.getLocale?.() || 'zh-Hans';
    return lang.startsWith('zh') ? 'zh-Hans' : 'en';
  } catch {
    return 'zh-Hans';
  }
};

const i18n = createI18n({
  locale: getDefaultLocale(),
  fallbackLocale: 'zh-Hans',
  messages,
  allowComposition: true,
  legacy: false,
  globalInjection: true
});

export default i18n;

在main.ts中集成vue-i18n和uView Pro：

// main.ts
import { createSSRApp } from 'vue';
import App from './App.vue';
import i18n from './locales';
import uViewPro from 'uview-pro';

const app = createSSRApp(App);

// 先使用vue-i18n
app.use(i18n);

// 再使用uView Pro，并配置国际化
app.use(uViewPro, {
  locale: {
    defaultLocale: 'zh-CN'
  }
});

2. 语言切换

<!-- components/LanguageSwitcher.vue -->
<template>
  <view class="language-switcher">
    <u-select
      v-model="selectedLocale"
      :options="localeOptions"
      @change="handleLocaleChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLocale } from 'uview-pro';

const { t, locale } = useI18n();
const { setLocale } = useLocale();

const selectedLocale = ref(locale.value);

const localeOptions = computed(() => [
  { label: '中文', value: 'zh-Hans' },
  { label: 'English', value: 'en' }
]);

const handleLocaleChange = (value: string) => {
  // 设置vue-i18n语言
  locale.value = value;

  // 设置系统语言
  uni.setLocale(value);

  // 同步到uView Pro
  const uViewLocale = value === 'zh-Hans' ? 'zh-CN' : 'en-US';
  setLocale(uViewLocale);
};
</script>

3. 在组件中使用双重国际化

<template>
  <view class="page-container">
    <!-- 使用vue-i18n的业务文案 -->
    <view class="page-title">{{ t('page.title') }}</view>

    <!-- 使用uView Pro的组件 -->
    <u-button @click="showModal">{{ t('buttons.submit') }}</u-button>

    <u-modal v-model="showModal" :show-confirm-button="false">
      <!-- 模态框内的文案使用vue-i18n -->
      <view class="modal-content">
        <text>{{ t('modal.confirmMessage') }}</text>
      </view>

      <!-- uView Pro组件的按钮文案会自动使用对应语言 -->
      <view>
        <u-button @click="cancel">{{ t('buttons.cancel') }}</u-button>
        <u-button type="primary" @click="confirm">{{ t('buttons.confirm') }}</u-button>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const showModal = ref(false);

const confirm = () => {
  // 处理确认逻辑
  showModal.value = false;
};

const cancel = () => {
  showModal.value = false;
};
</script>

4. 语言包示例

// src/locales/langs/zh-CN.json
{
  "name": "zh-CN",
  "page": {
    "title": "用户设置"
  },
  "buttons": {
    "submit": "提交",
    "cancel": "取消",
    "confirm": "确认"
  },
  "modal": {
    "confirmMessage": "您确定要执行此操作吗？"
  }
}

// src/locales/langs/en-US.json
{
  "name": "en-US",
  "page": {
    "title": "User Settings"
  },
  "buttons": {
    "submit": "Submit",
    "cancel": "Cancel",
    "confirm": "Confirm"
  },
  "modal": {
    "confirmMessage": "Are you sure you want to perform this action?"
  }
}

5. 优势特点

• 无缝集成：vue-i18n处理业务文案，uView Pro处理组件文案
• 统一切换：一次操作同步切换所有文案
• 性能优化：两个语言系统独立工作，互不影响性能

八. 总结

uView Pro的国际化功能为开发者提供了强大的多语言支持能力，让构建全球化应用变得前所未有的简单。

核心价值

1. 开箱即用：内置中英文支持，无需额外配置
2. 灵活定制：支持修改内置文案，满足个性化需求
3. 扩展性强：轻松添加新语言，适应全球市场
4. 性能优异：基于Vue 3响应式系统，性能卓越
5. 开发友好：完善的TypeScript支持和开发体验

未来规划

我们还会不断改进国际化相关的功能，未来会做到这些：

• 增加更多默认语言，比如日语、法语、西班牙语等，让更多用户能直接用；
• 支持把语言包存放和管理在云端，方便多人协作和随时更新；
• 集成AI翻译，让添加新语言更省力。

一点建议

如果你准备用uView Pro做国际化，或者已经在做，强烈推荐你用最新版，这样能第一时间体验到这些新功能。无论你是做全球业务的创业公司，还是有多语种需求的大公司，uView Pro都能帮你轻松搞定。

---

关于uView Pro

uView Pro 是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，提供 80+ 精选 UI 组件、便捷工具、常用模板等，支持多语言、多主题、暗黑模式 ，支持 H5、小程序、Android、iOS、鸿蒙等多端，开箱即用。

技术资源

• 官网：uviewpro.cn
• 插件市场：dcloud插件市场
• 国际化文档：uviewpro.cn/zh/guide/i1...
• GitHub：github.com/anyup/uView...
• Gitee：gitee.com/anyup/uView...
• 交流反馈：点击进入