vue3.2 i18n国际化

最新推荐文章于 2024-09-19 15:33:11 发布

cc&

最新推荐文章于 2024-09-19 15:33:11 发布

阅读量507

点赞数

分类专栏： vue 3.2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/grow_/article/details/123151178

版权

vue 3.2 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

本文详细介绍了在 Vue3.x 应用中实现国际化（i18n）的步骤，包括安装 vue-i18n@next，创建 i18n 文件设置，如何在 main.js 中引入并使用，组件中使用 $t 函数显示翻译内容，以及如何结合 vuex 进行情景切换。同时展示了切换语言的组件代码和 vuex 的状态管理。

摘要由CSDN通过智能技术生成

1、安装 npm i vue-i18n@next

2、创建文件 @/i18n/index 设置使用

import { createI18n } from 'vue-i18n'

import EN from './en'
import ZH from './zh'
// 数据源--不同的语言对应的内容
const messages = {
  en: {
    ...EN
  },
  zh: {
    ...ZH
  }
}

// 设置当前的语言
const getCurrentLanguage = () => {
  // 浏览器设置语言
  const UAlang = navigator.language
  // 判断UAlang是哪一种语言
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en'
  // 存起来
  localStorage.setItem('lang', langCode)
  return langCode
}

// 创建i8n
const i18n = createI18n({
  legacy: false, // 使用的vue3.2
  globalInjection: true, // 全局的t函数
  locale: getCurrentLanguage() || 'zh', // 设置语言
  messages: messages // 数据源
})

// 导出
export default i18n

3、main.js引入

// i18n导入
import i18n from '@/i18n'
app.use(i18n)

4.组件使用方式 eg: {{$t('login.title')}}

5.切换语言(需要使用到vuex)

vuex:

 state: () => ({
    lang: localStorage.getItem('lang') || 'zh'
  }),
  mutations: {
    changeLang(state, lang) {
      state.lang = lang
    }
  },

lang组件：

//template
 <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <svg-icon icon="language"></svg-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'"
          >中文</el-dropdown-item
        >
        <el-dropdown-item command="en" :disabled="currentLanguage === 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>

//js
<script setup>
// 获取当前的语言
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
// 使用vuex
import { useStore } from 'vuex'
const i18n = useI18n()
const store = useStore()
// 当前为那种语言
const currentLanguage = computed(() => {
  return i18n.locale.value
})

// 切换
const handleCommand = (val) => {
  console.log(val)
  i18n.locale.value = val
  store.commit('app/changeLang', val)
  localStorage.setItem('lang', val)
}
</script>