vue3 外部封装的request里面使用i18n

在 Vue3 中，如果你有一个外部封装的请求库（比如 Axios），并且想要集成国际化的特性（如 i18n），可以按照以下步骤操作：

1. **安装依赖**：
首先确保你已经安装了 Vue I18n 和 Axios。如果还没有，可以用以下命令安装：

   npm install vue-i18n axios

2. **创建国际化实例**：
在项目初始化的地方，创建 VueI18n 的实例，并配置语言资源文件：

   import Vue from 'vue'
   import App from './App.vue'
   import { createI18n } from 'vue-i18n'
   
   const messages = {
     en: require('./locales/en.json'),
     zh: require('./locales/zh.json') // 根据需要添加其他语言支持
   }
   
   const i18n = createI18n({
     locale: 'en', // 默认语言
     fallbackLocale: 'en',
     messages
   })
   
   Vue.use(i18n)

3. **修改请求函数**：
在你的 Axios 请求封装里，你可以将文本信息作为参数传递给翻译函数 `t`，这通常会从 VueI18n 实例获取：

   const axiosInstance = axios.create()

   axiosInstance.interceptors.request.use(config => {
     config.headers.common['Content-Type'] = 'application/json';
     // 如果请求包含字符串需要翻译，可以在发送前转换为国际化文本
     if (config.method === 'GET' && config.url.includes('your-resource-url')) {
       const translatedMessage = i18n.t('your-string-key');
       config.params.yourStringParam = translatedMessage;
     }
     return config;
   }, error => Promise.reject(error));
   
   export default axiosInstance;

4. **使用国际化请求**：
在你的组件内部或者服务中调用这个封装好的请求时，传入对应的字符串键即可获取到国际化后的消息：

   import axios from '@/axios'

   axios.get('your-resource-url', { params: { yourStringParam: 'your-string-key' } }).then(response => ...);