vue+i18n实现全局语言切换

青旅半醒 2022-05-21 08:26 237阅读 0赞

1.安装i18n

npm install vue-i18n

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

![70][]

中文版：

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实现切换点击事件

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------->[点击打开链接][Link 1] #

[70]: /images/20220521/d53b8f9b7c9c4bb39c23e81d37709dc8.png
[Link 1]: https://github.com/mannix-lei/vueProject