vue3使用 i18n

标签：lang vue const vue3 en 使用 i18n import

官网  https://vue-i18n.intlify.dev/guide/installation.html 安装 npm install vue-i18n   新建语言文件 如  // lang / zh.ts
export default {
    login: {         login: '登录',
        userName: '用户名',
        password: '密码',
    },
};   新建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"))   在模板里 可以直接使用 无需引入 {{ $t("login.password") }} <div v-t="'login.password'"></div>   切换语言

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

 

标签：lang,vue,const,vue3,en,使用,i18n,import
From： https://www.cnblogs.com/anans/p/17397218.html