vue项目多语言配置

1. 安装 Vue I18n：首先安装 Vue I18n 库，我这里使用 npm 进行安装：

npm install vue-i18n

2. 创建语言文件：在你的项目中创建一个文件夹用于存放多语言文件，例如 locales，然后在这个文件夹中创建每种语言的 JSON 文件。例如，你可以创建 zh-CN.json 和 en-US.json 来分别存放中文和英文的翻译内容。

// zh-CN.json
{
  "hello": "你好"
}

// en-US.json
{
  "hello": "Hello"
}

3. 配置 Vue I18n：在 Vue 项目的入口文件中配置 Vue I18n，并设置默认语言和加载语言文件的路径。

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

// 使用动态 import 加载语言文件
Promise.all([
  import('./locales/zh-CN.json'),
  import('./locales/en-US.json')
]).then(([zhCN, enUS]) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'zh-CN', // 设置默认语言
    messages: {
      'zh-CN': zhCN.default, // 注意这里需要使用 .default 获取模块的默认导出
      'en-US': enUS.default
    }
  })
  app.use(i18n)
})
const app = createApp(App)
app.mount('#app')

这里为什么使用 Promise 导入语言文件？

在 Vue I18n 中，messages 选项应该是一个对象，直接使用 import 导入语言文件，这会返回一个 Promise 而不是语言数据对象。
为了解决这个问题，在加载语言文件时使用动态 import，然后在 then 回调中设置 messages 对象。另外，createI18n 方法不支持异步传递 messages，所以需要在创建 i18n 实例之后手动设置语言数据。

5. 在组件中使用多语言：在你的 Vue 组件中通过 $t 方法来使用多语言翻译。

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

$t 方法会根据当前语言选择对应的翻译内容。

这里要是在组件中使用，举个栗子：(usernamePlaceholder)

<template>
	<Field v-model="username" name="username" label="" :placeholder="usernamePlaceholder"
          :rules="[{ required: true, message: $t('hello') }]" />
</template>

<script setup> 
// 使用国际化函数  
const { t } = useI18n();  
const usernamePlaceholder = t('hello');  
</script> 

6. 切换语言：你可以在你的应用程序中添加一个切换语言的功能，例如在设置页面中，通过修改 Vue I18n 实例的 locale 属性来切换语言。

import { ref, watch } from 'vue';

const { t,locale } = useI18n();
//如果是在页面上这样写  $t('hello')  的，changeLanguage 方法执行后语言就切换了
const changeLanguage=(value)=>{
  locale.value = value;
}

//像 usernamePlaceholder 这样定义的变量，要切换多语言，需要 watch 监听
let usernamePlaceholder = t('hello');
//这里监听多语言切换
watch(locale, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    usernamePlaceholder = t('hello');
  }
});

在设置页面中调用 changeLanguage 方法，并传入要切换的语言标识符，例如 zh-CN 或 en-US。