vue3.2+ts+vue-i18n实现语言切换的详细步骤

以中英文切换为例子，多语言多加就是了，其实网上一搜有很多教程，但是俺主要把踩坑的地方标红一下...因为只是使用的话，有时候会照葫芦画瓢画的不是很行，比如俺就是个例子...

1.下载-安装vue-i18n依赖

yarn add vue-i18n 或者 npm install vue-i18n --save-dev

2.创建文件夹在src下面，这步的名字取的随意就行，但在文件里记得对应，然后i18n是配置vue-i18n的文件，data文件夹里是按语言分的文件。

这里我取的文件夹名字是language，然后语言相关的文件都放在data文件夹下面的。

像en.ts和zh.ts这种文件都是装要翻译的语言，如下设置你需要的数据，export default是导出去，因为在i18n.ts文件里要用的。

// en.ts
export default  {
    menu:{
        upload:'upload',
        placeholderTips:'please Enter',
        home:'Home', 
    }
}

// zh.ts
export default  {
    menu: {
        upload:'上传',
        placeholderTips:'请输入',
        home:'首页',
    }
}

当然也可以直接在i18n.ts里定义数据，但是数据量一般都挺大的，就单独建文件写咯。

注意message这个名字不能变的！！！不要随心所欲！！

import {createI18n} from 'vue-i18n'
import en from './data/en' // 你需要翻译的数据文件
import zh from './data/zh' // 你需要翻译的数据文件

const i18n = createI18n({
    legacy: false, // 处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
    locale: localStorage.getItem('language') || 'en', //获取默认的语言类型 可以自己在本地缓存里存一个 也可以用pinia 个人选择
    globalInjection:true, // 全局注册 $t方法
    messages:{en,zh}  // message就是message，不要用其他变量名  {}里面的就是上面导入的要翻译的数据文件
})

export default i18n  // 导出去用

3.理所当然的去main.ts里导出一下！

import i18n from './language/i18n' // 这个路径看自己的路径蛤

createApp(App).use(i18n).mount('#app')  // 放在创建后面  挂载前面 没毛病吧！

4.终于到使用咯！三种使用场景

one-页面上直接使用

因为俺上面全局注册了的，就是i18n.ts里面的globalInjection:true全局了注册 $t方法，所以在页面上直接这样写，能看懂吧！看不懂抠眼珠子。

<button>{{ $t("menu.upload") }}</button>
<span style="color: red;">{{ $t("menu.placeholderTips") }}</span>

two-js里用它

首先得把t导出来用，对象解构t，再使用才可以滴。

import { useI18n } from "vue-i18n";
const {t}= useI18n()

console.log(t("menu.upload"), 'tt');

three-页面标签上像placeholder使用

跟one差不多叭，就是注意双引号的问题，如果外面有双引号最好就变成单引号咯。

<el-input :placeholder="$t('menu.upload')" v-model="inputValue"></el-input>

5.上面先用可以了，再来学切换的方法，要想一步成功的看完5再看4

import { useI18n } from "vue-i18n";

const {locale}= useI18n()

上面是老两步，下面是改的，首先是在两个按钮上绑定方法！如果你不是按钮当我没说。

<el-button @click="changeLan('zh')">切换成中文</el-button>
<el-button @click="changeLan('en')">切换成英文</el-button>

然后写这个方法。

const changeLan = (lang_type: string)=>{
  localStorage.setItem('language',lang_type) // 存一下现在的语言
  locale.value = lang_type // 直接赋值
}

okkkkkk 全文结束，有bug的话就需要慢慢搜慢慢调咯，如果有解决不了的bug欢迎评论区留言，俺可以一起研究研究。