vue+i18n实现全局语言切换

1.安装i18n

npm install vue-i18n

 

2.新建中英文文案配置项

中文版：

module.exports = {
  title: {
    home: '首页',
    message: '脱壳咨询',
    fundFlow: '资金流向',
    focus: '脱壳关注',
    quote: '成交排行',
    chain: '链上数据',
    community: '社群数据',
    code: '技术评估'
  },
  tips: {
    inputPlaceHolder: '请输入内容'
  },
  text: {
    globalCurrency: '全球币市综合行情',
    specialOrder: '特色排序',
    fastOrder: '快速排序',
    groupChat: '官方群聊',
    volume_24H: '24h成交额',
    market: '市值',
    new_code_7d: '7日新增代码提交数',
    new_code_30d: '30日新增代码提交数',
    new_user_7d: '7日新增用户数',
    follower_total: '总关注数',
    contributors: '贡献者数'
  }
}

英文雷同；

3.在main.js中导入i18n并配置相关项

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
import 'element-ui/lib/theme-chalk/index.css'
import LangENUS from './config/common/lang/en-us'
import LangZHCN from './config/common/lang/zh-cn'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-cn',
  messages: {
    'en-us': LangENUS,
    'zh-cn': LangZHCN
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

4.js实现切换点击事件

<div style="padding-left: 20px">
    <el-button @click="changeLanguage">切换语言</el-button>
</div>

changeLanguage () {
  if (this.$i18n.locale == 'en-us') {
     this.$i18n.locale = 'zh-cn'
  } else {
     this.$i18n.locale = 'en-us'
  }
}

 

5.在页面中使用

<span>{{$t('text.globalCurrency')}}</span>

6.在响应式数据中的使用（data中）

options: [
          this.$t('text.volume_24H'), this.$t('text.market')
        ],

 

项目一直在进行，有意愿的童靴可以一起完善，练手很不错的------->git------->点击打开链接