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

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

1.安装


npm install vue-i18n --save

2.体会多语言切换


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


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


uni-app官网


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


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

1024b19218af40c7a8a6290c6186518d.png


把从官方里面的那个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 = '要更改的语言' 后生效

1024b19218af40c7a8a6290c6186518d.png



6.可能刚开始会有坑

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

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


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

1024b19218af40c7a8a6290c6186518d.png


目录
相关文章
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
18天前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
18天前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
30 7