From 6d677df583c993ed782e41a69cea47f653418fcb Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Tue, 30 Nov 2021 20:07:19 +0800
Subject: [PATCH] =?UTF-8?q?i18n:=20=E4=BF=AE=E6=94=B9=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/collocation/i18n.md | 78 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 77 insertions(+), 1 deletion(-)

diff --git a/docs/collocation/i18n.md b/docs/collocation/i18n.md
index f14cfe2a2..c3b7d23ee 100644
--- a/docs/collocation/i18n.md
+++ b/docs/collocation/i18n.md
@@ -14,7 +14,83 @@ uni-app 从 3.1.5 版本开始框架内置组件开始完善国际化支持，
 
 ## 应用内容国际化
 vue和js里的内容国际化是通行方案。
-uni-app基于vue.js，有成熟的i18n插件，[这里是uni-app开发者分享的i18n插件的使用](https://ask.dcloud.net.cn/article/35102)
+
+main.js 引入并初始化 VueI18n
+
+```js
+// 国际化 json 文件，文件内容详见下面的示例
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+const messages = {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
+
+let i18nConfig = {
+  locale: uni.getLocale(),// 获取已设置的语言
+  messages
+}
+
+// VUE2
+// #ifndef VUE3
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+const i18n = new VueI18n(i18nConfig)
+Vue.config.productionTip = false
+App.mpType = 'app'
+const app = new Vue({
+  i18n,
+  ...App
+})
+app.$mount()
+// #endif
+
+// VUE3
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+const i18n = createI18n(i18nConfig)
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(i18n)
+  return {
+    app
+  }
+}
+// #endif
+```
+
+国际化json文件内容
+
+```json
+{
+  "index.title": "Hello i18n"
+}
+```
+
+页面模板中使用 `$t()` 获取，并传递国际化json文件中定义的key，js中使用 `this.$t('')`
+
+```html
+<template>
+  <view class="container">
+    <view class="title">{{$t('index.title')}}</view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>
+```
+
+注意：页面中设置语言后需要调用 `this.$i18n.locale = 'zh-Hans'` 后生效
 
 ## uni-app 框架国际化@uni-framework
 
-- 
GitLab