什么是$t？$t的介绍及使用

目录

$t介绍：

作用：

安装国际化插件：

创建国际化资源文件

 配置 vue-i18n ：

 切换语言：

下面为中文和英文状态下的效果：

---

如下面所示，这是一段前端代码：

<el-form-item :label="$t('extend.billingDesc')"
                          prop="billingDesc">
              <el-input size="small"
                        v-model="siteForm.billingDesc" />
            </el-form-item>

第一眼看到这个代码的时候，你应该能肯定这个是form表单的label显示的文字，

也大概知道这个$t，是一个全局的方法或者哪里引入的东西

$t介绍：

$t 是一个通常用于国际化（i18n）的函数。具体来说，当你使用 Vue.js 并结合某些国际化库（如 vue-i18n）时，$t 函数被用来根据当前设置的语言环境（locale）返回相应的翻译文本。

作用：

1. 翻译文本：$t 方法根据当前设置的语言环境（locale）和提供的键（key），返回对应的翻译文本。轻松地为应用提供多语言支持。
2. 动态翻译：由于 $t 方法是在运行时根据当前语言环境和键进行翻译的，因此它支持动态翻译。这意味着你可以根据用户的交互或应用的状态来改变显示的文本。
3. 可维护性：通过将文本与代码分离，并使用键来引用翻译文本，可以提高代码的可维护性。当需要修改或添加翻译时，只需更新国际化资源文件，而无需修改组件代码。

 当你直接复制文章前的代码到页面上去时，页面label的显示是会有问题的，如下图所示：

如果页面上的 label显示了 extend.billingDesc 而不是实际的翻译文本，那么很可能是国际化配置没有正确设置或者国际化资源文件没有正确加载。

安装国际化插件：

（如果你还没有安装 vue-i18n 插件）

通过 npm 或 yarn 来安装：

npm install vue-i18n  
# 或者  
yarn add vue-i18n

创建国际化资源文件

在你的项目中创建一个目录（例如 src/i18n）来存放你的国际化资源文件。每个语言环境的资源文件都应该是一个 JavaScript 对象，其键是你要翻译的文本（如 extend.billingDesc），值是该文本在对应语言环境中的翻译。

如下图所示：

其中cn是中文，en是英文

代码例如：

//cn.js

module.exports = {
    language:'语言',
    rulesPage:{ //校验
      role:"角色不能为空",
      pickArea:"拣货库区不能为空",
      email:"请输入正确的邮箱地址",
      phone:"请输入正确的手机号码"
    },
    extend:{
      billingDesc:'账单描述'
    }
  }

//en.js
module.exports = {
    language:'language',
    rulesPage:{ //校验
      role:"The role cannot be empty",
      pickArea:"The picking warehouse area cannot be empty",
      email:"Please enter the correct email address",
      phone:"Please enter the correct phone number"
    },
    extend:{
      billingDesc:'billingDesc'
    }
 }

 配置 vue-i18n ：

 引入自己搞的资源包，locale为默认使用的包，下面为当你登录后，优先获取本地缓存的lang，再判断当前的用户需要什么语言，就是个语言环境持久化。

当用户切换语言环境时，你可以把新的语言环境设置保存到这些存储机制中，并在应用启动时从它们中读取设置来恢复用户的语言环境偏好。

//index.js

//引入
import VueI18n from 'vue-i18n'
import CN from './locale/cn'
import EN from './locale/en'
import Vue from 'vue'

//语言包对象
const messages = { EN , CN };

//需要创建一个 VueI18n 实例，并设置其 messages 属性为你的国际化资源文件。
Vue.use(VueI18n)
const i18n = new VueI18n({
//也可以通过使用浏览器的 sessionStorage 或 cookies 来实现。
//也可以用navigator.language 获取浏览器的语言，前提是你需要有这个语言的资源包哦，也可以对拿到的语言进行判断是否有此包，否则就默认中文
  locale: localStorage.lang||'CN',  //当前默认为中文
  messages,
});
//导出
export default i18n;

main.js:

//...
import i18n from './i18n/index';
//...
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

 切换语言：

你可以通过修改 VueI18n 实例的 locale 属性来切换语言环境。

例如，this.$i18n.locale = 'EN' 将把当前的语言环境切换到英语。如果使用的本地缓存之类的话，修改本地缓存的数据就可以了，使用Vuex的话就掉用他里面的方法就行

一般使用点击事件就行，更好的就是在创建用户或者角色的时候选择他是哪国人，使用哪国语言就行了，一般用于国际化的平台，一般国内来讲的话，用中文就可以了，其实不需要这么麻烦。

下面为中文和英文状态下的效果：