vue3国际化

1.安装引入

npm install vue-i18n

2.在src下新建i18n文件夹,包含index.js,en.js,zh.js(只做中英文切换)

// zh.js
export default {
  notebook: {
    search: '搜索',
    top:'置顶',
  }
}

 

// en.js
export default {
  notebook: {
    search: 'Search',
    top:'Top',
  }
}

 

// index.js
import {createI18n} from 'vue-i18n'
import zh from './zh'
import en from './en'

const messages = {
  en,
  zh,
}
const language = (navigator.language || 'zh').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'ch', // 设置备用语言
  globalInjection:true,//全局生效$t
  legacy: false,
  messages,
})

export default i18n

 

3.在main.js引入

import i18n from '@/i18n';
const app = createApp(App);
app.use(i18n);
app.mount("#app");

至此插件就算配置好了，接下来使用的话基本上就两种场景，一是在<template>里面,一种是在setup里面

使用
在<template>中使用
要用到一个$t()的方法，或者使用v-t也行

<div>
    {{$t('login.userName')}}
</div>
<div v-t="'login.password'"></div>
<input type="text" :placeholder="$t('notebook.search')">

关于$t()还有很多用法，可以动态传参等，具体还是去官网看看

在setup中使用

import { useI18n } from 'vue-i18n'
export default {
    name: "View",
    setup() {
        const { locale } = useI18n();
        locale.value = 'en';
        localStorage.setItem('lang', 'en');    

        const { t } = useI18n();
        let folderName = ref(t('notebook.top'));
    }
}

目前项目中只采用这两种方式，还有其他的就不展开了

切换语言
vue-i18n提供了一个全局变量locale，直接修改即可

<template>
<div class="menu">
<div class="menu-item" @click="changeLang('en')">English</div>
<div class="menu-item" @click="changeLang('zh')">中文</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const changeLang = (lang: string) => {
locale.value = lang
localStorage.setItem('lang', lang)// 重要！下面遇到问题里解释
}
</script>

总结
按照目前的生态来看，做国际化项目还是比较多资料来参考的，ui框架用的是vant,这也可以通过设置locale来改变组件的语言。

import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)

业务代码使用vue-i18n也很简单，是个不错的选择

原文链接：https://blog.csdn.net/laishaojiang/article/details/124634764