vue3使用 i18n

完美前端 / 2023-05-13 / 原文

官网

https://vue-i18n.intlify.dev/guide/installation.html

安装

npm install vue-i18n

新建语言文件

如 // lang / zh.ts
export default {
login: {

新建i18n index.js文件

import { createI18n } from 'vue-i18n';
import zh from './zh';

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

export default i18n;

在main.js

import i18n from './i18n/index.js'

app.use(i18n)

或者拆分文件

使用的地方 setup里面使用

import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log (t("home.hello"))

在模板里可以直接使用无需引入

切换语言

<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>