[TOC] #### 1. uniapp 的國際化 --- zh-Hans 簡(jiǎn)體中文 zh-Hant 繁體中文 國際化 (Internationalization，簡(jiǎn)稱 i18n)：指軟件開發(fā)具備支持多種語言的地區(qū)功能 i18n 簡(jiǎn)稱的來源是單詞 Internationalization 的首末字符 i 和 n，18 為中間的字符數(shù)量 uniapp 的國際化開發(fā)指南文檔 : [https://uniapp.dcloud.net.cn/tutorial/i18n.html](https://uniapp.dcloud.net.cn/tutorial/i18n.html) #### 2. 國際化配置 ---  #### 3. VueI18n 多語言使用 --- **一、創(chuàng)建國際化 json 文件** ``` ├── locale │ ├── index.js │ ├── en.json │ ├── zh-Hans.json │ └── zh-Hant.json ``` 語言文件示例 (zh-Hans.json) : ```json { "app.name": "天樂商城", "index.title": "首頁", } ``` 合并導(dǎo)出國際化 json 文件 (index.js) : ```javascript import en from './en.json'; import zhHans from './zh-Hans.json'; export default { 'zh-Hans': zhHans, en } ``` **二、main.js 引入并初始化 VueI18n** ```javascript // 導(dǎo)入國際化 json 文件 import messages from '@/locale/index' const i18nConfig = { locale: uni.getLocale(), messages } // Vue 安裝 VueI18n import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n(i18nConfig) // 掛載到 Vue 實(shí)例 const app = new Vue({ ...App, i18n }) ```  **三、使用多語言** 頁面模板中使用 `$t` 獲取，并傳遞國際化 json 文件中定義的 key ```html <view>{{ $t('index.title') }}</view> ``` js 中使用 `this.$t()`，注意: this 指向的是 vue 實(shí)例 ```javascript this.$t('index.title') ``` pages.json 中使用 ```json { "pages": [{ "path": "pages/index/index", "style": { // 使用 %% 占位 "navigationBarTitleText": "%index.title%" } }], "tabBar": { "list": [{ "pagePath": "pages/index/index", // 使用 %% 占位 "text": "%index.home%" }] } } ``` **四、切換語言** `uni.setLocale()` 在 App 中會(huì)重啟應(yīng)用 ```javascript uni.setLocale('en') this.$i18n.locale = 'en' ```