当前位置: 首页 > news >正文

(最简单,详细,直接上手)uniapp/vue中英文多语言切换

官方文档

uni-app官网

1.安装

npm install vue-i18n --save

2.体会多语言切换

hello-i18n 示例工程 - DCloud 插件市场

这里面是一个官方的demo可以参考并且把它下载运行起来体会一下语言切换


uni-app官网 

这个是uniapp的官方文档可以做参考(项目着急的话,直接可以参考下面的文章)


3.将语言包导入到自己的项目

 把从官方里面的那个demo项目里面的local文件夹直接复制到自己的项目根目录里面,跟demo一样

4.main.js 引入并初始化 VueI18n

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages
}

// VUE2
// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()
// #endif

// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}

5.使用

页面模板中使用 $t() 获取,并传递国际化json文件中定义的key,js中使用 this.$t('') 

 注意:页面中设置语言后需要调用 this.$i18n.locale = '要更改的语言' 后生效

 6.可能刚开始会有坑

Fall back to translate ‘用户中心‘ key with ‘zh‘ locale.这样类似的问题

1.一般情况下是没有定义’xxxx’字段对应的翻译

2.仔细看一下要更改的语言与下面的K值是否匹配的上

相关文章:

  • 锂电池欧姆内阻和极化内阻
  • 得物基于 StarRocks 的 OLAP 需求实践
  • 能原谅吗?公式相声李宏烨幡然醒悟,从三个方面向郭德纲道歉
  • 目标检测4--Adaptive Training Sample Selection(ATSS)算法
  • 经典论文AlexNet
  • T1028:字符菱形(信息学一本通C++)
  • 投影仪竞争升级,卷完配置卷生态?
  • 关于我的本周目标
  • Go的Struct结构体和(Json Form tag)
  • 第十三届蓝桥杯JavaB组省赛F题——最大子矩阵 (AC)
  • 易观分析互联网+慢病管理生态洞察,助力行业升级
  • PIE-engine 教程 ——基于PIE-engine的水体频率变化长时序遥感监测自动计算平台
  • 第十三届蓝桥杯JavaB组国赛G题——背包与魔法 (AC)
  • Vue Admin Template关闭eslint校验,lintOnSave:false设置无效解决办法
  • MMpose初体验--多人姿态检测关键点检测
  • 【译】理解JavaScript:new 关键字
  • 77. Combinations
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • const let
  • css属性的继承、初识值、计算值、当前值、应用值
  • idea + plantuml 画流程图
  • JavaScript对象详解
  • Java方法详解
  • Node + FFmpeg 实现Canvas动画导出视频
  • web标准化(下)
  • 模型微调
  • 你不可错过的前端面试题(一)
  • 排序(1):冒泡排序
  • 使用putty远程连接linux
  • 微信支付JSAPI,实测!终极方案
  • 一些关于Rust在2019年的思考
  • 译有关态射的一切
  • 最近的计划
  • 阿里云服务器如何修改远程端口?
  • 阿里云移动端播放器高级功能介绍
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • #define
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • $NOIp2018$劝退记
  • (3)选择元素——(17)练习(Exercises)
  • (C语言)字符分类函数
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (转)IOS中获取各种文件的目录路径的方法
  • . Flume面试题
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET Core 2.1路线图
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)
  • .NetCore 如何动态路由
  • .NetCore实践篇:分布式监控Zipkin持久化之殇
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解