i18n在Vue3中的使用

1. npm install vue-i18n

2. src文件下创建i18n文件

   

   • lang文件夹下的ts文件为语言包

       // 示例
       cn.ts  // 语文语言包
       export default {
           message:'这是中文'
           ...
       }
       en.ts // 英文语言包
       export default {
           message:'This is English'
           ...
       }
       ja.ts // 日文语言包
       export default {
           message:'これは日本語です'
           ...
       }
   

   • 在 i18n/ index.ts引入语言包

       import cn from "@/i18n/langs/cn"
       import en from "@/i18n/langs/en"
       import ja from "@/i18n/langs/ja"
       export default {
           cn,
           en,
           ja
       }
   

   3. 在main.ts注册i18n

   

      import { createI18n } from 'vue-i18n';  // 引入I18n示例函数
      import messages from "@i18n/index" ;  // 引入自定义语言包对象
      const i18nconfig = {
           locale: localStorage.lang || 'cn',
           legacy: false,  // 解决i18n在vue传统模式下报错
           messages
      }
      const i18n = createI18n(i18nconfig)  // 生成i18n示例
      ...use.(i18n) // 挂载到Vue
   

   4. 在文件中使用

     <template>
         <div>
             登錄頁面
             <!-- $t为i18n方法，实现国际化 -->
             {{$t('message')}}
             <div>
                 <el-select v-model="value"  placeholder="Select" size="large" @change="changeLange">
                     <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     />
                 </el-select>
             </div>
         </div>
     </template>
     <script setup lang="ts">
         import {ref} from "vue"
         import {useI18n} from "vue-i18n"
         const {locale} = useI18n()
         const value = ref('cn') // 设置默认语言
         const options = ref([
             {
                 value:'cn',
                 label:'中文',
             },
             {
                 value:'en',
                 label:'English',
             },
             {
                 value:'ja',
                 label:'日本',
             }
         ])
   
         const changeLange = (el:string):void => {
             locale.value = el // 通过 i18n 的 local.value 实现国际化
         }
     </script>
     <style lang="scss" scoped>
   
     </style>