i18n: 修改项目国际化示例

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