Vue3中使用i18n实现国际化(中英切换)

目录结构

─src
    ├─locales
      └─lang
          └─en.js  //英文语言包
          └─zh.js  //中文语言包
    ├─i18n.js     //i18n注册 

 1.安装vue-i18n

yarn add vue-i18n

或

npm install vue-i18n

2.创建i18n(i18n.js)

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

const messages = {
    zh, //中文语言包
    en   //英文语言包
}

const i18n = createI18n({
    legacy: false,//启用 composition Api 模式
    globalInjection: true,//注入全局状态
    locale: localStorage.getItem('lang') || 'zh', //从本地存储获取语言/默认使用中文
    messages //导入语言包
})

export default i18n;

3.创建中文语言包(zh.js)、英文语言包(en.js)

export default {
    "首页":'首页',
    "关于":'关于',
    "联系":"联系",
    "项目":"项目"
}

export default {
    "首页":'home',
    "关于":'about',
    "联系":"contact",
    "项目":"project"
}

zh.js 与 en.js 里的内容是我们需要国际化的语言标签

4.在main.js中全局注册i18n

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import i18n from './locales/i18n';
const app = createApp(App)
app
    .use(router)
    .use(i18n)
    .mount('#app')

5.在开发中使用i18n

<template>
  <div class="lang-wrapper">
    <div class="lang-button" v-for="item in state.langs" :key="item.value">
      <button @click="langChange(item)">{{ item.name }}</button>
    </div>
    <div class="lang-content" v-for="item in state.content" :key="item.value">
      {{ $t(item.name) }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const state = reactive({
  langs: [
    { name: "中文", value: "zh" },
    { name: "English", value: "en" },
  ],
  content: [
    { name: "首页", value: "home" },
    { name: "关于", value: "about" },
    { name: "联系", value: "contact" },
    { name: "项目", value: "project" },
  ],
});

const langChange = (item) => {
  localStorage.setItem("lang", item.value);
  window.location.reload();
};
</script>