vue3项目中使用 vue-i18n国际化插件，实现多语言效果

**i18来源：**国际化的英文单词internationalization太长了，掐头去尾取首字母i和尾字母n，中间刚好还有18个字母，就缩写为了i18n。

安装

直接下载/CDN

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js">script>

npm/yarn 安装

npm install vue-i18n
// or
yarn add vue-i18n

基本使用

创建语言包

在项目中创建一个 locales 目录，用于存放不同语言版本的翻译文件。例如，可以在 locales 目录下创建 en.json 和 zh.json 等文件。

// en.json
{
  "hello": "Hello, World!"
}

// zh.json
{
  "hello": "你好，世界!"
}

初始化 vue-i18n：

在 Vue3 应用的入口文件main.ts中初始化 vue-i18n 并加载语言包：

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

const i18n = createI18n({
  legacy: false, // Vue 3 版本需要设置为 false
  locale: 'en', // 默认语言
  messages: {
    en: require('./locales/en.json'),
    fr: require('./locales/fr.json')
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

在组件中使用i18n

在js/ts中使用，即在script中使用,需要引入文件，使用t语法:

<template>
  <div>
    <p>{{ t('hello') }}</p>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>