vue项目中如何设置支持多语言（i18n插件）

首先可以先下i18n插件的官方文档
引入流程：

安装插件

npm install vue-i18n

引入

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import msgs from '@/utils/lang/messages';

// 注册i18n
Vue.use(VueI18n);

function toLowerCaseKey(obj) {
    
    
    // iOS safari 10.2之前 语言代码为小写
    Object.keys(obj).forEach((key) => {
    
    
        obj[key.toLowerCase()] = obj[key];
    });
    return obj;
}

const locale = navigator.language || navigator.userLanguage;

// iOS safari 10.2之前 语言代码为小写
const messages = toLowerCaseKey({
    
    ...msgs });

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
    
    
    locale, // 设置地区
    fallbackLocale: 'en',
    silentFallbackWarn: true, // 避免fallbackLocale警告
    messages, // 设置地区信息
});
// window下挂载i18n,vue对象之外通过window对象实现多语言
window.i18n = i18n;

export default i18n;

msgs是本地的语言包
本地语言包目录如下：
在这里插入图片描述
其中：messages.js是整体配置

import en from './en';
import zh from './zh';
import zhCN from './zh-CN';
import ja from './ja';
import th from './th';
import vi from './vi';

export default {
    
    
    en,
    'zh-HK': zh,
    'zh-MO': zh,
    'zh-SG': zh,
    'zh-TW': zh,
    zh: zhCN,
    th,
    ja,
    vi,
};

其他文件都是对应的本地语言，随便找两个看一下：

//ja.js
import shareIcon from '@/images/share-icon-ja.png';
export default {
    
    
    teacherOnWay: '先生が教室に入ってくるのを待ちます。',
    exitRoom: 'クラスに入るのをやめますか？',
    backRoom: '「クラスに入る」をクリックすると、再入室できます。',
    btnGot: '了解',
    btnOK: '確認',
    btnCancel: 'キャンセル',
    shareIcon,
};

//en.js
import shareIcon from '@/images/share-icon-en.png';
export default {
    
    
    teacherOnWay: 'Teacher is on the way.',
    exitRoom: 'Exiting the classroom?',
    backRoom: 'You can click button "Enter" to get back in.',
    btnGot: 'Got it',
    btnOK: 'OK',
    btnCancel: 'cancel',
    shareIcon,
};

使用

首先要在vue对象下引入

  import Vue from 'vue';
  import i18n from '@/plugins/i18n';
  new Vue({
      
      
  	router,
  	i18n,
  	store,
  	render: (h) => h(Base),
  }).$mount('#container');

模版中使用

                 <button
                     class="btn-default help"
                     @click.stop="getHelp">
                     {
      
      {
      
       $t('help') }}
                 </button>

js中使用

  async created() {
      
      
      window.setTimeout(() => {
      
      
          Indicator.open(this.$t('joinRoom'));
      }, 100);
      this.$store.commit('user/initState', {
      
       parent: true, checkify: true });
      // 判断是不是国际版app,国际版不显示求助和反馈问题
      this.isInternatioal = await this.internationalEdition();
  }

需要注意的地方来了～
在vue对象之外，如何实现多语言，比如一些工具类，以及一些公用js方法。这里想到的一种方法就是，在plugins中引入i18n对象时，把i18n对象挂载到window对象上（上面代码中包含了挂载这一步），下面是使用示例

            let defaultOpt = {
    
    
                content: window.i18n.t('lateTip', {
    
     msg: latemin }),
                backDismiss: false,
                buttons: [window.i18n.t('btnGot')],
            };

vue项目中如何设置支持多语言（i18n插件）

猜你喜欢