uniapp 使用 i18n 实现多语言切换（vue 也是一样的）

最新推荐文章于 2024-08-13 11:26:09 发布

Mr.冬冬

最新推荐文章于 2024-08-13 11:26:09 发布

阅读量4.2k

点赞数

分类专栏： uniapp vue app

本文链接：https://blog.csdn.net/weixin_42307129/article/details/104773827

版权

本文介绍了如何在uniapp项目中使用i18n实现多语言切换，步骤包括准备语言包js文件，导入并配置i18n到main.js，以及在应用中切换语言的方法。

摘要由CSDN通过智能技术生成

1.准备语言包(js文件 )

const Chinese = {
	language:"中文",
	China:"中国"
}
const English = {
	language:"language",
	China:"China"
}
//导出中文包和英文包如果还有别的语言自己添加即可
export {
	Chinese,
	English
}

2.在main.js导入i18n并使用

a）（导入语言包）language.js 就是我上面的那个文件

b）导入前使用npm安装下i18n (npm install i18n --save)

//导入i18n
import VueI18n from 'vue-i18n'
//导入语言包
import {English,Chinese} from "common/util/language.js"
//使用i18n
Vue.use(VueI18n)

//本地缓存uni.getStorageSync("language") 有的时候使用本地缓存没有使用en-us 也就是默认英文版

const i18n = new VueI18n({  
  locale:  uni.getStorageSync("language")||'en-US',  
  messages: {  
    'en-US': {  
      index: English
    },  
    'zh-CN': {  
      index: Chinese
    }  
  }  
})

Vue.prototype._i18n = i18n

const app = new Vue({
	i18n,
    ...Ap