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 版本需要设置为 falselocale: '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>