Vue3项目中引入i18n国际化配置多语言功能

安装vue-i18n

npm install vue-i18n @next --save

配置vue-i18n

• src文件夹下创建文件locals用来放置语言配置相关信息（src/locals)
• locals文件夹下创建文件夹lang，用来配置要配置的不同地区的语言(src/locals/lang)
• lang下创建json，为自己想要用的语言，例如：
  • zh.json

{
  "menu": {
    "login": "登录",
    "home": "首页",
    "layout": "首页",
    "h404": "404"
  },
}

• zh-tw.json

{
  "menu": {
    "login": "登入",
    "home": "首頁",
    "layout": "首頁",
    "h404": "404"
  }
}

• 在locals下创建index.ts，用于引入和定义i18n和语言（src/locals/index.ts)

import { createI18n } from "vue-i18n";

//引入语言文件
import zh from "./lang/zh.json";
import zhTw from "./lang/zhTw.json";

// 定义i8n的message
const messages = {
  zh: {
    ...zh,
  },
  zhTw: {
    ...zhTw,
  },
};

// 定义i8n的locale
const i18n = createI18n({
  locale: "zhTw", // set local-默认本地用zhTw
  messages, // set locale messages
});
export default i18n;

在main.ts中配置导入i18n实例

import { createApp } from 'vue'
import App from '@/App.vue'
import i18n from './locals' // 导入i18n实例

const app = createApp(App)
app.use(i18n) // 使用i18n 
app.mount('#app')

在项目中使用

<template>  
  <div>{{ $t('menu.layout') }}</div>  
</template>