2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue 项目 国际化

国际化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 
    }
}

  

 

本文来源于网络:查看 >
« 上一篇:13.实现非平衡二叉树的单旋(左旋和右旋)代码实现JavaScript版
» 下一篇:做web前端的小伙伴注意了,未来这些发展方向可以试试!
评论
点击刷新
评论
相关博文
×添加代码片段