vue-i18n的实际使用场景

最近有一个国外的项目需要做多语言切换，想到了使用i18n，这里就把我的使用经验写下来。

1，安装        

         vue2安装8版本 vue3安装9版本

pnpm install vue-i18n@9 --save
pnpm install vue-i18n@8 --save

2，配置i18n

       安装完成后在vue项目src目录下新建一个ts文件，命名i18n.ts我们在这个文件里写入我们的配置文件

import { createI18n } from 'vue-i18n'
import en from './locales/en' // 导入英文语言包
import zh from './locales/zh' // 导入英文语言包
const messages = { //把导入的语言包封装下
  en,
  zh,
}

const savedLang = localStorage.getItem('lang') || 'en' // 默认语言为英文，如果 localStorage 中有保存的语言，则使用保存的语言
export default createI18n({
  legacy: false, // 使用 composition API 模式
  locale: savedLang, // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages //传入语言包
})

       这里有几个点要说明下，首先，第一个就是我们默认语言是存放在本地的，当我们切换语言后，需要更新本地的数据，第二个就是回退语言 fallbacklocale 这个是当系统在语言包中 没有找到我们定义好的字段，就用en语言包的字段内容。

3，设计语言包

       这里我做例子 设计了en和zh2个语言包，在src目录下，新建locales文件夹，文件夹里新建en.ts和zh.ts文件，作为我们的语言包来使用。

        在en.ts中写入

export default {
  home: {
    title: 'home',
    content: 'welcome to home',
    button: 'click me',
  } as const, // 使用 as const 确保类型推断为只读对象
}

        在zh.ts中写入

export default {
  home:{
    title: '首页',
    content: '欢迎来到首页',
    button: '点击我'}

  } as const; // 使用 as const 确保类型推断为只读对象

        这里需要注意下 我们的语言包对象里面的属性必须都一致，就属性值变化，当创建好后，我们回到我们的配置文件i18n.ts里 将配置文件导入

import en from './locales/en' // 导入英文语言包
import zh from './locales/zh' // 导入英文语言包
const messages = { //把导入的语言包封装下
  en,
  zh,
}

         这时候基本上就定义完成了，我们在入口文件main.ts中将他挂载到vue上，

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import il8n from './il8n' //导入i18n配置文件
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(il8n) //挂载到vue上
app.mount('#app')

        后续就可以在组件中使用了

4.组件中使用

       webpack和vite的使用方式稍微有点区别，需要区分下

        在vite中使用

        在webpack中的使用稍微有一点区别

 5.语言切换

import { useI18n } from "vue-i18n"; //导入i18n用户配置方法
const { locale } = useI18n();//获取locale方法用来切换语言
const toggleLang = (lang:string) => {
  locale.value = lang; //将locale.value赋值语言，
  localStorage.setItem('lang', lang) //当切换语言时，存储当前选中语言，在配置文件中可以作为默认语言传入
};

每个语言包相当于是一种语言，根据实际情况添加不同的语言即可。