Vue3 —— 语言国际化（i18n）

最新推荐文章于 2024-08-10 00:20:10 发布

偷一只猪ma

最新推荐文章于 2024-08-10 00:20:10 发布

阅读量3.5k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49392771/article/details/121475403

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

该博客详细介绍了如何在Vue3项目中配置和使用国际化插件vue-i18n，通过vite初始化项目，安装依赖，创建并导入不同语言的翻译文件，设置全局语言，并在组件内部切换语言，展示了中文和英文列表的显示。

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

需求:
  点击中文按钮，列表显示中文；点击english按钮，列表显示英文

如下图，
在这里插入图片描述

搭建vue3项目

//使用vite
npm init @vitejs/app

安装国际化依赖插件

npm install vue-i18n@next

创建i18n文件夹

src/i18n/ch.ts

export default {
  message:{
    one:'一',
    two:'二'
  }
}

src/i18n/en.ts

export default {
  message:{
    one:'one',
    two:'two'
  }
}

src/i18n/index.ts

import en from './en'
import ch from './ch'

export default {
  en,
  ch
}

src/i18n/i18n.ts

import { createI18n } from "vue-i18n";
import messages from './index'
const language = (
  (navigator.language ? navigator.language : navigator.userLanguage) || 'zh'
).toLowerCase()
const i18n = createI18n({
  fallbackLocale: 'ch',
  globalInjection: true,
  legacy: false,
  locale: language.split("-")[0] || 'zh',
  messages
})

export default i18n

组件内引用

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n/i18n' //引入i18n

const app = createApp(App)
app.use(i18n) //挂载到vue上

app.mount('#app')

组件内

<template>
  <div>
    <button @click="change('zh')">中文</button>
    <button @click="change('en')">english</button>
  </div>
  <div>
    <ul>
      <li v-for="item in items" :key="item.label">{{ t(`message.${item.label}`) }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
function change(type: string) {
  proxy.$i18n.locale = type
}
const items = [
  { label: 'one' },
  { label: 'two' }
]
</script>