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插件 功能强大,支持复杂需求 依赖第三方库,适合大型项目

相关推荐
十五春会1 天前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i2 天前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三2 天前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生2 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
2501_915918412 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909062 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_916008892 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921432 天前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone