vue3接入语言包
vue 2023-07-04 15:37:45

1、下载组件：vue-i18n

2、文件：main.js

JavaScript Code复制内容到剪贴板
  1. import i18n from './locales'  
  2.   
  3.   
  4. app.use(i18n)  

 

3、公共头部文件

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.       <el-menu  
  3.           :default-active="activeIndex"  
  4.           mode="horizontal"  
  5.           :router="true"  
  6.           :ellipsis="false"  
  7.           @select="handleSelectPc"  
  8.       >  
  9.   
  10.         <el-menu-item index="/">{{ $t('header.menu1') }}</el-menu-item>  
  11.         <el-menu-item index="/energy">{{ $t('header.menu2') }}</el-menu-item>  
  12.         <el-menu-item index="/product">{{ $t('header.menu3') }}</el-menu-item>  
  13.         <el-menu-item index="/case">{{ $t('header.menu4') }}</el-menu-item>  
  14.         <el-menu-item index="/partner">{{ $t('header.menu5') }}</el-menu-item>  
  15.         <el-menu-item index="/resource">{{ $t('header.menu6') }}</el-menu-item>  
  16.         <el-menu-item index="/about">{{ $t('header.menu7') }}</el-menu-item>  
  17.         <el-menu-item index="/ucenter">{{ $t('header.menu8') }}</el-menu-item>  
  18.       </el-menu>  
  19.   
  20.   
  21.         <el-dropdown trigger="click" placement="bottom-end" @command="configLang">  
  22.           <el-button circle>  
  23.             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>  
  24.           </el-button>  
  25.           <template #dropdown>  
  26.             <el-dropdown-menu>  
  27.               <el-dropdown-item v-for="item in langList" :key="item.value" :command="item" :class="{'selected':lang === item.value}">{{item.name}}</el-dropdown-item>  
  28.             </el-dropdown-menu>  
  29.           </template>  
  30.         </el-dropdown>  
  31.   
  32. </template>  
  33.   
  34.   
  35. <script setup>  
  36. import { useRoute } from 'vue-router'  
  37. import { getCurrentInstance, ref, watch } from 'vue'  
  38. const { proxy } = getCurrentInstance()  
  39. const $TOOL = proxy.$TOOL  
  40. const route = useRoute()  
  41.   
  42. const lang = ref($TOOL.data.get('APP_LANG') || $CONFIG.LANG)  
  43. const langList = ref([  
  44.   {  
  45.     name: '简体中文',  
  46.     value: 'zh-cn',  
  47.   },  
  48.   {  
  49.     name: 'English',  
  50.     value: 'en',  
  51.   }  
  52. ])  
  53.   
  54. watch(  
  55.     () => lang,  
  56.     (currentVal, oldVal) => {  
  57.       proxy.$i18n.locale = currentVal.value  
  58.       console.log('设置当前语言', proxy.$i18n.locale)  
  59.       $TOOL.data.set("APP_LANG", currentVal.value)  
  60.     },  
  61.     {  
  62.       deep:true  
  63.     }  
  64. );  
  65.   
  66. const configLang = (command) => {  
  67.   console.log(command.value)  
  68.   lang.value = command.value  
  69. }  
  70.   
  71. ...  
  72.   
  73. </script>  

 

4、App.vue

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <ElConfigProvider :locale="locale">  
  3.     ...  
  4.   </ElConfigProvider>  
  5. </template>  
  6.   
  7. <script setup>  
  8. import { ref, computed, onMounted, getCurrentInstance } from 'vue'  
  9. const { proxy } = getCurrentInstance()  
  10.   
  11. const locale = computed(() => {  
  12.   // console.log('获取当前语言', proxy.$i18n.locale)  
  13.   return proxy.$i18n.messages[proxy.$i18n.locale].el  
  14. });  
  15.   
  16. ...  
  17. </script>  

 

5、使用：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   
  3.     <p class="t1">{{ $t('computer.title') }}</p>  
  4.     <p class="t2">{{ $t('computer.subTitle') }}</p>  
  5.   
  6. </template>  
  7.   
  8. <script setup>  
  9. import { getCurrentInstance, inject, onMounted, ref } from 'vue'  
  10. const { proxy } = getCurrentInstance()  
  11. const $t = inject('$t')  
  12. const dialogFormTitle1 = ref($t('computer.otherPop.title'))  

 

locales.zip
文件类型: .zip 8b827757b7e764d41990b73715bbb711.zip (2.75 KB)

 

 

 

ant design vue 版本：

1、main.js：

JavaScript Code复制内容到剪贴板
  1. // 全局语言包  
  2. import i18n from './locales'  
  3.   
  4. const app = createApp(App)  
  5. // ...  
  6. app.use(i18n)  

 

2、App.vue

XML/HTML Code复制内容到剪贴板
  1. <script setup>  
  2. import { computed, getCurrentInstance, ref } from 'vue'  
  3.   
  4. const { proxy } = getCurrentInstance()  
  5.   
  6. const locale = computed(() => {  
  7.   console.log('获取当前语言', proxy.$i18n.locale)  
  8.   return proxy.$i18n.messages[proxy.$i18n.locale]  
  9. })  
  10.   
  11.   
  12. </script>  
  13.   
  14. <template>  
  15.   <a-config-provider  
  16.       :locale="locale"  
  17.   >  
  18.     <RouterView/>  
  19.   </a-config-provider>  
  20. </template>  

 

3、使用：

模板直接使用：{{ $t('self.login.title') }}

XML/HTML Code复制内容到剪贴板
  1. <script setup>  
  2. import { getCurrentInstance, ref } from 'vue'  
  3.   
  4. const { proxy } = getCurrentInstance()  
  5. const lang = ref($TOOL.data.get('APP_LANG') || $CONFIG.LANG)  
  6. const langList = ref([  
  7.   {  
  8.     name: '中文',  
  9.     value: 'zh-cn',  
  10.   },  
  11.   {  
  12.     name: '英文',  
  13.     value: 'en-us',  
  14.   },  
  15.   {  
  16.     name: '卢旺达',  
  17.     value: 'lwd',  
  18.   }  
  19. ])  
  20.   
  21.   
  22. const handleMenuClick = (e) => {  
  23.   const language = e.key  
  24.   proxy.$i18n.locale = language  
  25.   console.log('设置当前语言', proxy.$i18n.locale)  
  26.   $TOOL.data.set("APP_LANG", language)  
  27. }  
  28.   
  29. </script>  
  30.   
  31.   
  32. <template>  
  33.   
  34.   
  35.         <a-dropdown>  
  36.           <template #overlay>  
  37.             <a-menu @click="handleMenuClick">  
  38.               <a-menu-item :key="item.value" v-for="(item, index) in langList">{{ item.name }}</a-menu-item>  
  39.             </a-menu>  
  40.           </template>  
  41.   
  42.           <GlobalOutlined style="font-size: 18px;" />  
  43.   
  44.         </a-dropdown>  
  45.   
  46. </template>  

 

在JS部分使用：

JavaScript Code复制内容到剪贴板
  1. <script setup>  
  2. import { useI18n } from 'vue-i18n'  
  3. const { t } = useI18n()  
  4.   
  5. console.log(t('self.order.search1.col1'))  

 

 

语言包：

locales-antdv.zip
文件类型: .zip ebf200806b35e07ee66c5c27f7cec4ce.zip (7.60 KB)

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/673.html

上一篇 vue2/vue3深度选择器
下一篇 ant design vue 4 select选择器踩坑
相关的文章
Powered by yoyo苏ICP备15045725号