uniapp国际化如何实现

在uniapp中如何实现国际化功能？目前需要在项目中支持多语言切换，但不太清楚具体应该怎么操作。请问是否有成熟的方案或插件推荐？希望能够支持动态切换语言，并且可以方便地管理多语言资源文件。最好能提供一个简单的示例代码说明基本实现流程。

2 回复

uniapp国际化可通过vue-i18n实现。在main.js引入并配置语言包，使用$t()方法切换文本。页面中通过{{$t(‘key’)}}绑定多语言内容，也可动态切换语言。


在 UniApp 中实现国际化（多语言支持）可以通过以下步骤完成，主要依赖 Vue 的响应式特性和语言资源文件管理：

实现步骤

  1. 创建语言资源文件
    在项目中新建 lang 目录，存放不同语言的 JSON 文件，例如：

    • zh-CN.json（中文）
    • en-US.json（英文）

    示例内容：

    // zh-CN.json
{
  "hello": "你好",
  "welcome": "欢迎使用 UniApp"
}

    // en-US.json
{
  "hello": "Hello",
  "welcome": "Welcome to UniApp"
}

  2. 配置语言模块
    创建 lang/index.js 文件，管理语言切换和文本获取：

    import en from './en-US.json';
import zh from './zh-CN.json';

const messages = { en, zh };
let currentLang = 'zh'; // 默认语言

export const setLanguage = (lang) => {
  currentLang = lang;
};

export const t = (key) => {
  return messages[currentLang]?.[key] || key; // 返回对应语言文本，若无则返回 key
};

  3. 在 Vue 中全局注入
    在 main.js 中挂载 $t 方法，方便全局调用：

    import { t, setLanguage } from '@/lang/index';

Vue.prototype.$t = t;
Vue.prototype.$setLanguage = setLanguage;

  4. 在页面中使用
    模板或 JS 中直接调用 $t：

    <template>
  <view>
    <text>{{ $t('hello') }}</text>
    <button @click="switchLang">切换英文</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchLang() {
      this.$setLanguage('en'); // 切换语言
    }
  }
};
</script>

  5. 持久化语言设置
    使用 uni.setStorageSync 保存用户选择的语言，应用启动时读取：

    // 设置语言时保存
export const setLanguage = (lang) => {
  currentLang = lang;
  uni.setStorageSync('userLang', lang);
};

// 应用初始化时读取
const savedLang = uni.getStorageSync('userLang');
if (savedLang) currentLang = savedLang;

注意事项

  • 响应式更新：直接修改变量 currentLang 不会触发页面刷新，可通过强制更新（如 this.$forceUpdate()）或结合 Vuex 管理状态。
  • 系统语言检测：可用 uni.getSystemInfoSync().language 获取设备语言，自动匹配。

以上方法简单高效，适用于大部分 UniApp 多语言场景。

回到顶部