uniapp中使用vue-i18n实现多语言

一 安装vue-i18n

npm i vue-i18n@6

二 添加相关语言配置

 如 en.json:

{
  "locale.auto": "System",
  "locale.en": "English",
  "locale.zh-hans": "简体中文",
  "locale.zh-hant": "繁体中文",
  "locale.ja": "日语",
  "index.title": "Hello i18n",
  "index.home": "Home",
  "index.component": "Component",
  "index.api": "API",
  "index.schema": "Schema",
  "index.demo": "uni-app globalization",
  "index.demo-description": "Include uni-framework, manifest.json, pages.json, tabbar, Page, Component, API, Schema",
  "index.detail": "Detail",
  "index.language": "Language",
  "index.language-info": "Settings",
  "index.system-language": "System language",
  "index.application-language": "Application language",
  "index.language-change-confirm": "Applying this setting will restart the app",
  "api.message": "Message",
  "schema.name": "Name",
  "schema.add": "Add",
  "schema.add-success": "Add success"
}

和 cn.json

{
    "locale.auto": "系统",
    "locale.en": "English",
    "locale.zh-hans": "简体中文",
    "locale.zh-hant": "繁体中文",
    "locale.ja": "日语",
    "index.title": "Hello i18n",
    "index.home": "主页",
    "index.component": "组件",
    "index.api": "API",
    "index.schema": "Schema",
    "index.demo": "uni-app 国际化演示",
    "index.demo-description": "包含 uni-framework、manifest.json、pages.json、tabbar、页面、组件、API、Schema",
    "index.detail": "详情",
    "index.language": "语言",
    "index.language-info": "语言信息",
    "index.system-language": "系统语言",
    "index.application-language": "应用语言",
    "index.language-change-confirm": "应用此设置将重启App",
    "api.message": "提示",
  "schema.name": "姓名",
    "schema.add": "新增",
    "schema.add-success": "新增成功"
}

和index.js:

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
import ja from './ja.json'
export default {
    en,
    'zh-Hans': zhHans,
    'zh-Hant': zhHant,
    ja
}

三 在main.js中配置

import App from './App'
import messages from './locale/index'

let i18nConfig = {
  locale: uni.getLocale(),
  messages
}
 

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #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
  }
}
// #endif

四 最后在页面中使用多语言，如i18ntest.vue:如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

<template>   <view class="container">     <view class="title">{{$t('index.demo')}}</view>     <view class="description">{{$t('index.demo-description')}}</view>     <view class="detail-link">{{$t('index.detail')}}: <text         class="link">https://uniapp.dcloud.net.cn/collocation/i18n</text></view>     <view class="locale-setting">{{$t('index.language-info')}}</view>     <view class="list-item">       <text class="k">{{$t('index.system-language')}}:</text>       <text class="v">{{systemLocale}}</text>     </view>     <view class="list-item">       <text class="k">{{$t('index.application-language')}}:</text>       <text class="v">{{applicationLocale}}</text>     </view>     <view class="locale-setting">{{$t('index.language')}}</view>     <view class="locale-list">       <view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">         <text class="text">{{item.text}}</text>         <text class="icon-check" v-if="item.code == applicationLocale"></text>       </view>     </view>   </view> </template>   <script>   export default {     data() {       return {         systemLocale: '',         applicationLocale: ''       }     },     computed:{       locales() {         return [{             text: this.$t('locale.auto'),             code: 'auto'           }, {             text: this.$t('locale.en'),             code: 'en'           },           {             text: this.$t('locale.zh-hans'),             code: 'zh-Hans'           },           {             text: this.$t('locale.zh-hant'),             code: 'zh-Hant'           },           {             text: this.$t('locale.ja'),             code: 'ja'           }         ]       }     },     onLoad() {       let systemInfo = uni.getSystemInfoSync();       this.systemLocale = systemInfo.language;       this.applicationLocale = uni.getLocale();       this.isAndroid = systemInfo.platform.toLowerCase() === 'android';       uni.onLocaleChange((e) => {         this.applicationLocale = e.locale;       })     },     methods: {       onLocaleChange(e) {           uni.setLocale(e.code);           this.$i18n.locale = e.code;       }     }   } </script>   <style>   .title {     font-size: 16px;     font-weight: bold;     margin-bottom: 15px;   }     .description {     font-size: 14px;     opacity: 0.6;     margin-bottom: 15px;   }     .detail-link {     font-size: 14px;     word-break: break-all;   }     .link {     color: #007AFF;     margin-left: 10px;   }     .locale-setting {     font-size: 16px;     font-weight: bold;     margin-top: 25px;     margin-bottom: 5px;     padding-bottom: 5px;     border-bottom: 1px solid #f0f0f0;   }     .list-item {     font-size: 14px;     padding: 10px 0;   }     .list-item .v {     margin-left: 5px;   }     .locale-item {     display: flex;     flex-direction: row;     padding: 10px 0;   }     .locale-item .text {     flex: 1;   }     .icon-check {     margin-right: 5px;     border: 2px solid #007aff;     border-left: 0;     border-top: 0;     height: 12px;     width: 6px;     transform-origin: center;     /* #ifndef APP-NVUE */     transition: all 0.3s;     /* #endif */     transform: rotate(45deg);   } </style>

　　参考了插件hello-i18n。