• vue 项目 国际化


    使用插件: vue-i18n

      1. 安装: npm install vue-i18n

      2. 目录结构

        

       

    // i18n.js
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import messages from './lang'
    
    Vue.use(VueI18n)
    const i18n = new VueI18n({
      locale: 'en',
      messages
    })
    
    export default i18n
    

      

    // lang/index.js
    import cn from './cn'
    import en from './en'
    
    export default {
      cn,
      en
    }
    

      

    // lang/cn.js
    const cn = {
      errorCode: {
        '403': '没有权限',
        '429': '您操作太频繁了,休息一下',
        '500': '系统异常'
      },
      message: {
        hello: '你好,世界'
      }
    }
    
    export default cn
    

      

    //lang/en.js
    const en = {
      errorCode: {
        '403': '没有权限',
        '429': '您操作太频繁了,休息一下',
        '500': '系统异常'
      },
      message: {
        hello: 'hello world'
      }
    }
    
    export default en
    

      

    //main.js
    import i18n from '@/i18n/i18n'
    
    new Vue({
      el: '#app',
      router,
      store,
      i18n,
      render: h => h(App)
    })
    

     国际化这样差不多完成了,接下来开始使用了

            <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索{{$t('message.hello')}}</el-button> // $t 表示当前语言文件,message表示对应对象下的对应字段 
    

      script 中使用需要加入 this,如:

    this.versionTitleDia = this.$t('message.hello')
    

      语言的切换,使用this.$i18n.locale

    data() {
        return {
            lang: 'cn'
        }
    },
    methods: {
        switchLang()  {
            this.$i18n.locale = this.lang 
        }
    }
    

      

  • 相关阅读:
    C#基础知识之GC 垃圾回收
    获取地址栏参数并转化为对象
    input type属性为number时,去掉右边的上下箭头
    vscode用服务打开html
    富文本的原理和插件使用
    原生js拖拽、jQuery拖拽、vue自定义指令拖拽
    js的call()方法
    js继承
    网页禁止复制和解除禁止复制
    ES6-解构赋值
  • 原文地址:https://www.cnblogs.com/SuperBrother/p/13206703.html
Copyright © 2020-2023  润新知