refactor(i18n): 根据官方提示重构 i18n，全部功能正常

env/.env

@@ -6,3 +6,9 @@ VITE_APP_PUBLIC_BASE=/unibest/
 # TODO: 记得修改
 VITE_UNI_APPID = 'H5871D791'
 VITE_WX_APPID = 'wxa2abb91f64032a2b'
+
+# fallback lacale：en, zh-Hans, zh-Hant 等
+# 必须要在 lacale 文件夹中配置对应的 json 文件！！！
+# 参考文档如下
+# https://uniapp.dcloud.net.cn/tutorial/i18n.html#vue%E7%95%8C%E9%9D%A2%E5%92%8Cjs%E5%86%85%E5%AE%B9%E7%9A%84%E5%9B%BD%E9%99%85%E5%8C%96
+VITE_FALLBACK_LOCALE = 'zh-Hans'

manifest.config.ts

@@ -6,7 +6,13 @@ import { loadEnv } from 'vite'
 // 获取环境变量的范例
 const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), 'env'))
 // console.log(env)
-const { VITE_APP_TITLE, VITE_UNI_APPID, VITE_WX_APPID, VITE_APP_PUBLIC_BASE } = env
+const {
+  VITE_APP_TITLE,
+  VITE_UNI_APPID,
+  VITE_WX_APPID,
+  VITE_APP_PUBLIC_BASE,
+  VITE_FALLBACK_LOCALE,
+} = env
 
 export default defineManifestConfig({
   name: VITE_APP_TITLE,
@@ -15,6 +21,7 @@ export default defineManifestConfig({
   versionName: '1.0.0',
   versionCode: '100',
   transformPx: false,
+  locale: VITE_FALLBACK_LOCALE, // 'zh-Hans'
   h5: {
     router: {
       base: VITE_APP_PUBLIC_BASE,

src/locale/index.ts

@@ -1,29 +1,21 @@
 import { createI18n } from 'vue-i18n'
 
 import en from './en.json'
-import zh from './zh.json'
+import zhHans from './zh-Hans.json' // 简体中文
 
 const messages = {
   en,
-  zh,
+  'zh-Hans': zhHans, // key 不能乱写，查看截图 screenshots/i18n.png
 }
-console.log(uni.getLocale())
-
-export const getLocale = () => {
-  const browserLang = uni.getLocale()
-  if (Object.keys(messages).includes(browserLang)) {
-    return browserLang
-  }
-  return 'zh' // fallback language, 可以配置，必须是 message 的key
-}
-
-console.log(getLocale())
 
 const i18n = createI18n({
-  locale: getLocale(), //
+  locale: uni.getLocale(), // 获取已设置的语言，fallback 语言需要再 manifest.config.ts 中设置
   messages,
 })
 
+console.log(uni.getLocale())
+console.log(i18n.global.locale)
+
 /**
  * 非 vue 文件使用这个方法
  * @param { string } localeKey 多语言的key，eg: "app.name"
@@ -33,7 +25,9 @@ export const translate = (localeKey: string) => {
     console.error(`[i18n] Function translate(), localeKey param is required`)
     return ''
   }
-  const locale = getLocale()
+  const locale = uni.getLocale()
+  console.log('locale:', locale)
+
   const message = messages[locale]
   if (Object.keys(message).includes(localeKey)) {
     return message[localeKey]

src/main.ts

@@ -1,7 +1,7 @@
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import store from './store'
-import i18n from './locales/index'
+import i18n from './locale/index'
 import 'virtual:svg-icons-register'
 import 'virtual:uno.css'
 

src/pages/index/i18n.vue

@@ -29,13 +29,13 @@
 </template>
 
 <script lang="ts" setup>
-import { getLocale } from '@/locales/index'
+import i18n from '@/locale/index'
 import { testI18n } from '@/utils/index'
 
-const current = ref(getLocale())
+const current = ref(uni.getLocale())
 const languages = [
   {
-    value: 'zh',
+    value: 'zh-Hans',
     name: '中文',
     checked: 'true',
   },
@@ -48,8 +48,9 @@ const languages = [
 const radioChange = (evt) => {
   // console.log(evt)
   current.value = evt.detail.value
-  // https://uniapp.dcloud.net.cn/api/ui/locale.html#setlocale
+  // 下面2句缺一不可！！！
   uni.setLocale(evt.detail.value)
+  i18n.global.locale = evt.detail.value
 }
 </script>
 
@@ -79,3 +80,4 @@ const radioChange = (evt) => {
   background-color: #bcecd1;
 }
 </style>
+@/locale/index

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { translate as t } from '@/locales/index'
+import { translate as t } from '@/locale/index'
 
 /**
  * test i18n in not .vue file