vue3中使用i18（以中英文两种举例）

---

1：安装

npm install vue-i18n@next
yarn add vue-i18n@next

2：创建文件夹

如我需要中英文两种互译，则在src下面创建lang文件夹，里面有en.js、zh.js、index.js 三个文件，如下图

(1):zh.js

const zhCN = {
  messages: {
    'name': '姓名',
    'age': '年龄',
    'sex': '性别',
    "address": "东北松花江上"
  }
}
export default zhCN

(2): en.js

const en = {
  messages: {
    'name': 'name',
    'age': 'age',
    'sex': 'sex',
    "address": "On Songhua River in Northeast China"
  }
}
export default en

(3):index.js

import { createApp } from 'vue'
import App from '../App.vue'
import { createI18n } from 'vue-i18n'
import en from './en'
import zhCN from './zh'
 
const app = createApp(App)
const i18n = createI18n({
  legacy: false, 
  locale: localStorage.getItem('lang') || "zhCN", // 初始化显示中文
  messages: {en,zhCN} // 这里就是你有几种语言，对象里面就有几个
})
 
export default function (app) {
  app.use(i18n)
}

3：引入挂载

main.js

import { createApp } from 'vue'
import ant from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
import Vue from 'vue'
import i18n from './lang/index'  // 3.1引入 （这里变量不使用index是怕混入才使用的i8n，这个可以随便写，和下面挂载的一样即可）
const app = createApp(App)
app.use(i18n).use(ant).mount('#app'); // 3.2 挂载

4： 使用（按钮使用了nt Design Vue，根据你的框架来写即可，然后点击按钮就可以切换了）

<template>
  <div>
    <a-button @click="switchClick('zhCN')">中文</a-button>
    <a-button @click="switchClick('en')">英文</a-button>
    <p>姓名：{{ $t("messages.name") }}</p>
    <p>年龄：{{ $t("messages.age") }}</p>
    <p>性别：{{ $t("messages.sex") }}</p>
    <p>地址：{{ $t("messages.address") }}</p>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
function switchClick(lang) {
  locale.value = lang;
  localStorage.setItem("lang", lang);
}
</script>

<style></style>

5：补充（简单提一下在不同情况下如何使用）

（1）：template中，

<p>姓名：{{ $t("messages.name") }}</p>

（2）template的引号中

<a-input type="text" :placeholder="$t('messages.name')" />

（3）：script中

import { useI18n } from "vue-i18n";
const { t } = useI18n();
console.log(t("messages.name"));

参考文章