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

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>

效果：切换前\后

 

非常简单！欢迎学习和交流