前言

开发了一个国际化的项目，[技术栈] 是vue3 + TS + vite + vant + vuex, 需要设置多语言，采用的是vue-i18n这一个国际化插件,自己整理了一下,如果想看vue2的可以看这篇 vue2 国际化i18n.

安装引入

npm install vue-i18n   or    yarn add vue-i18n

在src下新建i18n文件夹,包含index.ts , lang / en.ts , lang / zh.ts(做中英文切换)

// lang / zh.ts
export default {
  login: {
    login: '登录',
    userName: '用户名',
    password: '密码',
  },
};

// lang / en.ts
export default {
  login: {
    login: 'login',
    userName: 'userName',
    password: 'password',
  },
};

// index.ts
import { createI18n } from 'vue-i18n';
import zh from './lang/zh';
import en from './lang/en';

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

export default i18n;

image.png

最后在main.js引入就好了

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')

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

使用

1.在<template>中使用

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

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

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

2.在setup中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>

还有其他的就不展开了

3.切换语言

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

<template>
    <div class="menu">
        <div  @click="changeLang('en')">English</div>
        <div  @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>

over