Vue3+Ts：使用i18n实现国际化与全局动态下拉框框切换语言

一、下载依赖：

npm install vue-i18n@nex

二、创建ts文件并配置main.ts

在 src 目录下新建 lang 文件夹，再创建3个ts文件，lang / index.ts , lang / en.ts , lang / zh.ts

index.ts

// index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
 
const messages = {
    en,
    zh,
}

console.log('localStorage.getItem', localStorage.getItem('language'));

const language = (navigator.language || 'en').toLocaleLowerCase() // 获取浏览器的语言
console.log('language.split', language.split('-')[0]);

const i18n = createI18n({
    locale: localStorage.getItem('language') || language.split('-')[0] || 'en', // 先从缓存里拿，没有的话就用浏览器语言，
    fallbackLocale: 'zh', // 设置备用语言
    messages,
    legacy: false,
    globalInjection:true,
})
 
export default i18n

en.ts

export default {
    login: {
        login: 'login',
        userName: 'userName',
        password: 'password',
    },
    captcha: 'Captcha',
    forgetPassword: 'Forget Password?',
    loginTip: 'The login result is random. Just fill in the captcha',
    editpassword: 'Edit Password',
    logout: 'Logout',
    errMsg: {
        inputRequired: 'Please Input {cont}',
        selectRequired: 'Please Select {cont}',
    },
}

zh.ts

export default {
    login: {
        login: '登录',
        userName: '用户名',
        password: '密码',
    },
    captcha: '验证码',
    forgetPassword: '忘记密码了？',
    loginTip: '当前登录结果随机。验证码随便填',
    editpassword: '修改密码',
    logout: '退出登录',
    errMsg: {
        inputRequired: '请输入{cont}',
        selectRequired: '请选择{cont}',
    },
}

main.ts

import i18n from './lang/index'
app.use(i18n)

三，如何使用

1.在中使用

 <div>
   {{ $t('login.userName') }}
 </div>
 <div v-t="'login.password'"></div>

2.在setup中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
 
const { t } = useI18n()
 
console.log(t('login.useName'))
</script>

四、全局下拉框动态切换

这边我是在stores下创建了一个langConversion.ts文件。src\stores\modules\langConversion.ts
langConversion.ts

export enum LangOption {
    EN = 'en',
    ZH = 'zh'
  }

// 语言可选项
export const langOptions = [
    { label: "English", value: LangOption.EN},
    { label: "中文", value: LangOption.ZH},
  ]


export async function  langConversionEvent(lang:string){
    // let langs = localStorage.getItem('language') === 'en'?'zh':'en'
    localStorage.setItem("language", lang);
    window.location.reload();
}

需要调用该方法的vue页面，这里用的NaiveUI组件

<n-select size="small"  style="width: 120px;" v-model:value="optionsValue" :options="options"   @update:value="handleUpdateValue"/>

<script lang="ts">
import { langConversionEvent, langOptions } from "@/stores/modules/langConversion"

export default defineComponent({
	setup(){
		const  optionsValue = ref(localStorage.getItem('language') || language.split('-')[0])
		return{
	        optionsValue,
	        options:langOptions,
	        handleUpdateValue (value: string) {
	          langConversionEvent(value)
	        },
	    }
	}
})


<script>

官网：I18n