uni-app i18n 国际化

在 uni-app 项目中实现国际化（i18n）可以通过引入 vue-i18n 库来进行。以下是一个简单的实现步骤：

1. 安装 vue-i18n

   在项目的根目录下运行以下命令安装 vue-i18n：

   npm install vue-i18n
   复制

2. 配置 vue-i18n

   在你的项目中创建一个 i18n 文件夹用于存放语言文件，并在其中创建一个 index.js 文件。

3. 创建语言文件

   在 i18n 文件夹中创建语言文件，例如 en.js 和 zh.js：

   // en.js
   export default {
     message: {
       hello: "Hello World"
     }
   };
   
   // zh.js
   export default {
     message: {
       hello: "你好，世界"
     }
   };
   复制

4. 配置 i18n

   在 i18n/index.js 中配置 i18n 实例：

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   import en from './en';
   import zh from './zh';
   
   Vue.use(VueI18n);
   
   const i18n = new VueI18n({
     locale: 'zh', // 设置默认语言
     messages: {
       en,
       zh
     }
   });
   
   export default i18n;
   复制

5. 修改 main.js

   在 main.js 中引入并使用 i18n：

   import Vue from 'vue';
   import App from './App';
   import i18n from './i18n/index';
   
   Vue.config.productionTip = false;
   
   App.mpType = 'app';
   
   const app = new Vue({
     i18n,
     ...App
   });
   app.$mount();
   复制

6. 在组件中使用

   在组件中使用 $t 方法进行文本国际化：

   <template>
     <view>{{ $t('message.hello') }}</view>
   </template>
   复制

7. 切换语言

   你可以通过修改 this.$i18n.locale 动态切换语言：

   this.$i18n.locale = 'en'; // 切换为英文
   复制

通过上述步骤，你可以在 uni-app 项目中实现基础的国际化功能。根据项目需求，还可以进一步扩展支持更多功能。