（最简单，详细，直接上手）uniapp/vue中英文多语言切换

太过爱你忘了你带给我的痛 2023-10-09 14:49 55阅读 0赞

官方文档

[uni-app官网][uni-app]

### 1.安装 ###

npm install vue-i18n --save

#### 2.体会多语言切换 ####

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

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

--------------------

[uni-app官网][uni-app]

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

--------------------

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

![f6c5a5b1ccfe46a394cd3beba6f1f511.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 = '要更改的语言'` 后生效**

![1b8918c2e6e34aa5a2c5ff180b928124.png][]

### 6.可能刚开始会有坑 ###

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

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

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

![550f1e7c44e34b1ba3ff0ac265ea302d.png][]

[uni-app]: https://uniapp.dcloud.net.cn/tutorial/i18n.html#
[hello-i18n _ - DCloud]: https://ext.dcloud.net.cn/plugin?id=6462
[f6c5a5b1ccfe46a394cd3beba6f1f511.png]: https://img-blog.csdnimg.cn/f6c5a5b1ccfe46a394cd3beba6f1f511.png
[1b8918c2e6e34aa5a2c5ff180b928124.png]: https://img-blog.csdnimg.cn/1b8918c2e6e34aa5a2c5ff180b928124.png
[550f1e7c44e34b1ba3ff0ac265ea302d.png]: https://img-blog.csdnimg.cn/550f1e7c44e34b1ba3ff0ac265ea302d.png