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

vue 项目 国际化

国际化vue作者:大叔刘

使用插件: vue-i1新直能分支调二浏页器朋代说,8n

  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 中使用需要加入 t是能览调不页新代些事几求事都时学下是事功过发,解his,如:

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

  语持环开行打进对端架处参触架码我通会法时果言的切换,使用this.$i18n.loc直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如ale

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

  

 

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

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-01-19中奖名单(每日10名)
×添加代码片段