前言
開發了一個國際化的項目，[技術棧] 是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 './config/zh';
import en from './config/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 './i18n'
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
