Vue3国际化适配（i18n）的简单使用（非常简单）

最新推荐文章于 2025-04-28 15:26:51 发布

龙井>_<

最新推荐文章于 2025-04-28 15:26:51 发布

阅读量4.5k

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_64664995/article/details/131680200

版权

文章介绍了如何使用Vue-i18n插件在Vue.js应用中实现国际化功能。通过npm或yarn安装插件，然后在main.js中配置i18n实例，定义不同语言的消息。在组件中使用$t方法显示翻译后的文本，并提供了语言切换的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-i18n是Vue.js的国际化插件

Vue-i18n官网：Vue I18n | Vue I18n

下载Vue-i18n插件：

# npm方式
npm install vue-i18n@9

# yarn方式
yarn add vue-i18n@9

在main.js引入Vue-i18n:

# main.js/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    cn: {
        message: {
            hello: '你好,世界'
        }
    }
}

// 使用选项创建i18n实例
const i18n = createI18n({
    locale: 'cn', // 当前语言
    fallbackLocale: 'en', // 回退语言
    messages,
    legacy: false,
    // 如果需要指定其他选项，可以设置其他选项
    // ...
})

createApp(App).use(i18n).mount('#app')

在index.vue中使用：

# index.vue

<template>
  <div class="home">
    <!-- 显示的语言 -->
    <p>{{ $t("message.hello") }}</p>
    <!-- 切换语言的按钮 -->
    <button @click="change">中英语言切换</button>
  </div>
</template>

<script setup>
useI18n()
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
let change = () => {
  if (locale.value == 'cn') {
    locale.value = 'en'
  } else {
    locale.value = 'cn'
  }
}
</script>

效果：切换前\后