如何使用i18n?看这篇就够了

下面以vue3为例

步骤一、下载并引入vue-i18n

yarn add vue-i18n

或者

npm i vue-i18n

这样就下载成功了，检查package.json也有引入

 接下来全局引入vue-i18n，所以在main.js或者main.ts中

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

// 引入语言文件
import en from './locales/en.json'
import zh from './locales/zh-cn.json'

// 创建i18n实例
const messages = {
  en,
  'zh-cn': zh
}

const i18n = createI18n({
  locale: localStorage.getItem('language') || 'zh-cn', // 默认语言
  messages, // 设置地区信息
  globalInjection: true // 全局注入
})

// 创建Vue应用并挂载
createApp(App).use(i18n).mount('#app')

 接下来就是配字典了，因为我们是用下标找值，同一个下标引入不同文件，所以值会不同创建两个

在en.json中

{
  "button": {
    "confirm": "Confirm",
    "login": "Login"
  }
}

在zh-cn.json文件中

{
  "button": {
    "confirm": "确认",
    "login": "登录"
  }
}

不难发现，如果配置的变量是login，修改选中引入的json，就会获得中文或者英文的值

步骤二、使用vue-i18n

在你需要的页面中使用变量即可

<template>
  <div>
    <button @click="toLogin">{{ $t('button.login') }}</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

function toLogin() {
  alert(t('button.login'))
}
</script>

步骤三、切换语言

// 切换语言
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
 locale.value = 'en' // 切换到英文
localStorage.setItem('language', 'en') // 同时保存到localStorage以便下次访问时保持语言设置