1. 安装i18n依赖
npm install vue-i18n
或
yarn add vue-i18n
2. 新建文件引入i18n,初始化实例并且在main文件中使用
import { createI18n } from 'vue-i18n'
// 语言包文件
import zhLocal from "./package/zh";
import enLocal from "./package/en";
// 导入语言文件
const messages = {
zh: { ...zhLocal },
en: { ...enLocal }
}
export let i18n;
// 提供install方法,给vue.use进行创建实例
export const setupI18n = {
install(app) {
const langStore = useLangStroe()
i18n = createI18n({
globalInjection: true, //如果设置true, $t() 函数将注册到全局
legacy: false, //如果想在composition api中使用需要设置为false,
locale: langStore.lang === 'zh-CN' ? 'zh' : langStore.lang,
fallbackLocale: 'en',
messages // set locale messages
})
app.use(i18n)
}
}
main.ts文件中引入
import { setupI18n } from '@/lang'
const app = createApp(App)
app.use(setupI18n)
app.mount('#app')
3. 使用方法
- 在vue模板中直接使用,例如{{ $t('') }}
- 在<script setup lang='ts'>中使用
import { useI18n } from 'vue-i18n'; const { t } = useI18n(); t('name')
4. 切换语言
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
locale.value = 'en'