vue3使用vue-i18n国际化

最新推荐文章于 2024-11-07 09:34:00 发布

今天吃了嘛o

最新推荐文章于 2024-11-07 09:34:00 发布

阅读量169

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45535843/article/details/141563657

版权

1、安装插件。
与vue2不同的是版本问题，vue2之间安装的话版本回过高。

npm install --save vue-i18n

2、在src目录下新建语言文件夹。
3、main中引入插件。


// i18n
import i18n from '@/locales'
app.use(i18n)

4、语言文件夹下的入口文件。

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

// 获取浏览器界面语言，默认语言
// https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/language
let currentLanguage = navigator.language.replace(/-(\S*)/, '')
// 如果本地缓存记录了语言环境，则使用本地缓存
let lsLocale = localStorage.getItem('locale') || ''
if (lsLocale) {
  currentLanguage = JSON.parse(lsLocale)?.locale
}

export default createI18n({
  locale: currentLanguage,
  legacy: false, // you must set `false`, to use Composition API
  globalInjection: true, // 全局注册 $t
  messages: {
    zh,
    en
  }
})

export const langs = [
  { key: 'zh', title: '中文' },
  { key: 'en', title: 'English' }
]

5、使用方法。


<template>
  <el-dropdown trigger="click" class="h-full" @command="handleCommand">
    <div class="flex items-center px-4 hover:bg-slate-100">
      <el-icon size="20"><Basketball /></el-icon>
      <span class="ml-2">{{ currentLan }}</span>
    </div>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="lang in langs" :command="lang">{{
          lang.title
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup>
import { ref } from "vue";

import { langs } from "@/locales";
import { useLocaleStore } from "@/store/modules/locales";

const useLocale = useLocaleStore();

let curLocale = useLocale.locale;
let currentLan = ref(langs.find((item) => item.key === curLocale).title);

function handleCommand(command) {
  currentLan.value = command.title;
  useLocale.setLocale(command.key);
}
</script>