vue i18n 国际化 使用方法

Posted star-x

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue i18n 国际化 使用方法相关的知识,希望对你有一定的参考价值。

1 先安装 npm install vue-i18n

2  新建文件assets/js/i18n.js

3  引入vue-i18n并注册到vue上

import VueI18n from ‘vue-i18n‘
import Vue from ‘vue‘
Vue.use(VueI18n)
let locale = ‘zh-CN‘
// 我这里进行了sessionStoraage配置
// sessionStorage.getItem(‘vuex‘) ? sessionStorage.getItem(‘vuex‘).language || ‘zh-CN‘ : ‘zh-CN‘
let messages = {
    "zh-CN": {
         ‘loginOut‘: ‘登出‘
    },
    "en-US": {
        ‘loginOut‘: ‘sessionOut‘
    }
}
export default new VueI18n({
  locale: locale,  // 语言标识
  messages: messages,
  silentTranslationWarn: true // 去除console中黄色报错
})

  4  全局注册 在main.js 中

import i18n from ‘./assets/js/i18n‘
new Vue({
  el: ‘#app‘,
  i18n,
  components: { App },
  template: ‘<App/>‘
})

  

5.
 
 在.vue 文件中使用方法
   1.   :placeholder="$t(‘loginOut‘)"
   2.   {{$t(‘loginOut‘)}}
 
 在.js 文件中使用方法
   import i18n from ‘../assets/js/i18n‘
   i18n.t(‘loginOut‘)
 
 
原链接:https://www.cnblogs.com/guozongzhang/p/10790441.html

以上是关于vue i18n 国际化 使用方法的主要内容,如果未能解决你的问题,请参考以下文章

vue中的js文件如何使用i18n 国际化

vue中的js文件如何使用i18n 国际化

vue项目使用i18n实现语言国际化操作

vue 3 vite 与 i18n 的国际化

VUE:在 vue 3.x 中使用 i18n

Vue 项目中实现多语言国际化 ( i18n )