【vue3】国际化vue-i18n不同代码情况下的使用。在数组中使用并实时切换语言

一、项目安装

npm install vue-i18n@next

二、使用

1、在src下创建lang文件夹

2、再准备语言包，我是中文和英文。（lang/en.js，lang/zn.js）

3、再准备语言环境（lang/index.js）

en.js

const en = {
    header: {
        'langZn': 'Chinese',
        'langEn': 'English',
        'search':'Product Search'
    },
  //因为footerNav后面要进行遍历，所以名字我就起的有顺序
    footerNav:{
        t1:'SLIDEWORKS',
        d11:'Literature',
        d12:'About Slideworks',
        d13:'Career',
        d14:'Contact Slideworks',

        t2:'Products',
        d21:'Telescopic Slides',
        d22:'Locks',
        d23:'Hinges',
        d24:'Caps Plugs',

        t3:'Global Support Center',
        d31:'Download Center',
        d32:'Technical Support',
        d33:'Solution for Infrastructure',
        d34:'Get Support',

        t4:'Global Operations',
        d41:'Where to Buy',
        d42:'Distribution Network',
        d43:'Link to',
    },
}
export default en

zn.js

const zn = {
    header: {
        'langZn': '中文',
        'langEn': '英文',
        'search':'产品搜索'
    },
    footerNav:{
        t1:'SLIDEWORKS',
        d11:'文学',
        d12:'关于 Slideworks',
        d13:'职业',
        d14:'联系 Slideworks',

        t2:'产品',
        d21:'伸缩式滑轨',
        d22:'锁',
        d23:'铰链',
        d24:'盖子',

        t3:'联络我们',
        d31:'下载中心',
        d32:'技术支持',
        d33:'基础设施解决方案',
        d34:'获得支持',

        t4:'全球运营',
        d41:'购买地点',
        d42:'供应商',
        d43:'链接到',
    },
}
export default zn

index.js

import { createApp } from 'vue'
import App from '../App.vue'
import { createI18n } from 'vue-i18n'
import en from './en'
import zn from './zn'
const app = createApp(App)
const i18n = createI18n({
    legacy: false,
    locale: sessionStorage.getItem('lang') || "en", // 初始化显示中文
    messages: {en,zn}, // 这里就是你有几种语言，对象里面就有几个
})

export default function (app) {
    app.use(i18n)
}

main.ts引入

// main.js 引入
import i18n from './lang';
App.use(i18n);

 ①点击切换语言以及插值语法情况下的使用  直接 $t('xxx.xxx')

<script setup lang="ts">
//引入vue-i18n
import { useI18n } from "vue-i18n";
//解构出locale
const { locale } = useI18n();
const switchClick=(lang:string)=>{
  //通过locale.value来切换语言
  locale.value = lang;
  //本地存储语言，我用的是session，根据情况来使用
  sessionStorage.setItem("lang", lang);
}
</script>

<template>
<div class="header">
  <h1><router-link to="/home"><img src="@/assets/image/logo.png" alt="logo"></router-link></h1>
  <div class="lang">
    <img src="@/assets/image/lang.jpg" alt="lang">
    <div class="text">
      <a href="javascript:" @click="switchClick('en')">{{ $t("header.langEn") }}</a> 
      <a href="javascript:" @click="switchClick('zn')">{{ $t("header.langZn") }}</a>
        //插值表达式的话就直接 $t('xxx.xxx') 语言切换的时候直接监听到，并切换
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">

</style>

②绑定属性的情况下使用  :xxx="$t('xxx.xxx')"

<template>
<div class="headerNav">
  <HeaderMenu :navList="navList"></HeaderMenu>
  <div class="search">
    <el-input v-model="inputValue" :placeholder="$t('header.search')" @keydown.enter.stop="search">
        //绑定属性 :xxx="$t('xxx.xxx')"
      <template #append>
        <el-button :icon="Search" @click="search" size="small"/>
      </template>
    </el-input>
  </div>
</div>
</template>

③在数组对象中使用。我的场景是把所有的数据都放在一个数组对象里，然后页面内容通过循环遍历上去。

<script setup lang="ts">
import {reactive, watch} from "vue";
//引入vue-i18n
import {useI18n} from "vue-i18n";
//结构t,locale   t('xxx.xx')用于拿到对应的值，locale后面用于监听语言的实时切换
const { t,locale } = useI18n();
const list=reactive([
  {
    id:1,
    title:t('footerNav.t1'),
    path:'' ,
    child:[
      {id:11,name:t('footerNav.d11'),path:'/dependableLoyal'},
      {id:12,name:t('footerNav.d12'),path:'/about'},
      {id:13,name:t('footerNav.d13'),path:'/home'},
      {id:14,name:t('footerNav.d14'),path:'/contactUs'},
    ]
  },
  {
    id:2,
    title:t('footerNav.t2'),
    path:'/products' ,
    child:[
      {id:21,name:t('footerNav.d21'),path:''},
      {id:22,name:t('footerNav.d22'),path:'/subProduct/127'},
      {id:23,name:t('footerNav.d23'),path:''},
      {id:24,name:t('footerNav.d24'),path:'/subProduct/121'},
    ]
  },
  {
    id:3,
    title:t('footerNav.t3'),
    path:'/support' ,
    child:[
      {id:31,name:t('footerNav.d31'),path:'/downloadCenter'},
      {id:32,name:t('footerNav.d32'),path:'/support'},
      {id:33,name:t('footerNav.d33'),path:'/solutionForInfrastructure'},
      {id:34,name:t('footerNav.d34'),path:'/contactUs'},
    ]
  },
])
//实时监听语言是否切换，如果不写下面的监听，当你语言进行切换后需要刷新页面才能切换页面上的，
watch(()=>locale.value,()=>{
  list.forEach((item,index)=>{
    item.title=t(`footerNav.t${index+1}`)
    item.child.forEach((i,id)=>{
      i.name=t(`footerNav.d${index+1}${id+1}`)
    })
  })
})

</script>

<template>
<div class="footerNav">
  <div class="f_list">
      <dl v-for="item in list" :key="item.id">
        <dt><router-link :to="item.path">{{ item.title }}</router-link></dt>
        <dd v-for="i in item.child" :key="i.id"><router-link :to="i.path">{{ i.name }}</router-link></dd>
      </dl>
  </div>
  
</div>
</template>

<style scoped lang="scss">

</style>