uniapp 实现项目多语言切换

UniApp开发微信小程序实现中英文切换的两种方案
avatar
2025-09-03 08:22:48
在UniApp开发微信小程序时，实现中英文切换功能是常见的国际化需求。本文将介绍两种实现方案：自定义i18n工具和vue-i18n插件，帮助开发者根据项目需求选择合适的方法。
自定义i18n工具实现方案
创建多语言资源文件
在项目的locales目录下，创建多个JSON文件存放不同语言的文本资源。例如：
en.json (英文)
json
复制
{
“hello”: “Hello”,
“welcome”: “Welcome to our application”
}
zh.json (中文)
json
复制
{
“hello”: “你好”,
“welcome”: “欢迎使用我们的应用程序”
}
实现i18n工具
创建i18n.js文件管理多语言逻辑：
JavaScript
复制
const locales = {
zh: require(‘./zh.json’),
en: require(‘./en.json’),
};

let currentLocale = ‘’;
if (!uni.getStorageSync(‘locale’)) {
const systemLanguage = uni.getSystemInfoSync().language;
currentLocale = systemLanguage.startsWith(‘zh’) ? ‘zh’ : ‘en’;
} else {
currentLocale = uni.getStorageSync(‘locale’);
}

const i18n = {
t(key) {
return locales[currentLocale][key] || key;
},
setLocale(locale) {
if (locales[locale]) {
currentLocale = locale;
uni.setStorageSync(‘locale’, currentLocale);
} else {
console.warn(Locale ${locale} not found);
}
},
};

export default i18n;
在main.js中配置和引用i18n
JavaScript
复制
import Vue from ‘vue’;
import App from ‘./App’;
import i18n from ‘./utils/i18n’;

Vue.config.productionTip = false;
Vue.prototype.$i18n = i18n;

App.mpType = ‘app’;
const app = new Vue({
…App
});
app.$mount();
在页面中使用多语言功能
HTML
复制


{{ $i18n.t(‘hello’) }}
{{ $i18n.t(‘welcome’) }}
<button @click=“switchLanguage(‘en’)”>English
<button @click=“switchLanguage(‘zh’)”>中文

使用vue-i18n插件实现方案
安装依赖
bash
复制
npm install vue-i18n@8 # Vue 2 项目
npm install vue-i18n@9 # Vue 3 项目
创建语言包文件
在项目中新建lang文件夹，存放不同语言的JSON文件：
en.json
json
复制
{
“hello”: “Hello”,
“welcome”: “Welcome to UniApp”
}
zh-CN.json
json
复制
{
“hello”: “你好”,
“welcome”: “欢迎使用 UniApp”
}
初始化vue-i18n
在main.js中配置国际化：
JavaScript
复制
import Vue from ‘vue’;
import App from ‘./App’;
import VueI18n from ‘vue-i18n’;

Vue.use(VueI18n);

const messages = {
en: require(‘@/lang/en.json’),
‘zh-CN’: require(‘@/lang/zh-CN.json’),
};

const i18n = new VueI18n({
locale: ‘zh-CN’, // 默认语言
messages,
});

const app = new Vue({
i18n,
…App
});
app.$mount();
在页面中使用多语言
HTML
复制


{{ $t(‘hello’) }}
{{ $t(‘welcome’) }}
<button @click=“switchLanguage(‘en’)”>English
<button @click=“switchLanguage(‘zh-CN’)”>中文

方案对比
方案 优点 缺点
自定义i18n工具 灵活性高，适合简单需求 需要手动管理语言切换和存储
vue-i18n插件 功能强大，支持复杂需求 依赖第三方库，适合大型项目