Vue I18n 在 Vuetify 项目中使用

官网

http://kazupon.github.io/vue-i18n/zh/introduction.html

https://vuetifyjs.com/en/features/internationalization/#creating-a-translation

介绍

Vue I18n 是 Vue.js 的国际化插件。

安装

cdn

npm

npm install vue-i18n

yarn

yarn add vue-i18n

vue-i18n 在 vue 单页面中使用

index.html 可以直接在浏览中运行, 如下效果

  
    
  

  
    

      {{msg}}
      


      语言选择：
        English
        简体中文
          
      Selected: {{selected}}
      


      
{{$t("message.hello")}}
      

        
{{item.title}}
      
    
    
    
    
  

vue-i18n 在 vue，vuetify 项目中使用

src/plugins/vuetify.js 中引入 vue-i18n, 设置后导出

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

import colors from 'vuetify/lib/util/colors'
import VueI18n from 'vue-i18n'

Vue.use(Vuetify)
Vue.use(VueI18n)

// 国际化显示配置
const messages = {
  en: {
    $vuetify: {
      examplesButton: 'Examples',
      sidebar: {
        title1: {
          value: 'Basic',
          children: {
            title1: {
              value: 'HelloWorld'
            },
            title2: {
              value: 'UpdateEnterExit'
            },
            title3: {
              value: 'GeneralUpdatePatternI'
            },
            title4: {
              value: 'SelectElementAndBindData'
            },
            title5: {
              value: 'SelectInsertRemove'
            }
          }
        }
      }
    }
  },
  zh: {
    $vuetify: {
      examplesButton: '示例',
      sidebar: {
        title1: {
          value: '基础',
          children: {
            title1: {
              value: '你好，世界'
            },
            title2: {
              value: '更新、添加、退出'
            },
            title3: {
              value: '生成、更新 I'
            },
            title4: {
              value: '选择元素并绑定数据'
            },
            title5: {
              value: '选择、添加、移除'
            }
          }
        }
      }
    }
  }
}

// 默认语言 en, 项目使用 sessionStorage 做语言记录
let i18nLocale = 'en'
if (sessionStorage.getItem('i18nLocale')) {
  i18nLocale = sessionStorage.getItem('i18nLocale')
}

// 实例化 vuei18n
const i18n = new VueI18n({
  locale: i18nLocale,
  messages
})

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#409eff',
        secondary: '#54a8ff',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      },
      dark: {
        primary: colors.blue.darken1
      }
    }
  },
  // vuetify 配置中添加 i18n lang 配置
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
}

const vuetify = new Vuetify(opts)
// 导出 i18n
export { vuetify, i18n }

设置单个按钮国际化文本, 注意： vuetify 中的模板和常规 vue 项目中的模板不一致

{{$vuetify.lang.t('$vuetify.examplesButton')}}

设置列表国际化处理，列表为通过 Data 动态生成的，Data 数据必须写在 computed 中

 ...
 computed: {
    // 动态侧边栏
    items: function () {
      return [
        {
          icon: 'mdi-alpha-b-box-outline',
          title: this.$vuetify.lang.t('$vuetify.sidebar.title1.value'), // 侧边栏菜单项
          children: [  // 菜单子项
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title1.value'), path: '/examples/helloworld' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title2.value'), path: '/examples/updateenterexit' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title3.value'), path: '/examples/generalupdatepattern' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title4.value'), path: '/examples/selectelementbinddata' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title5.value'), path: '/examples/selectinsertremove' }
          ],
          appendIcon: 'mdi-chevron-down',
          active: true
        },
        ...

效果例子

完整项目地址

https://github.com/gywgithub/vue-d3-examples

喜欢就 点个赞 再走呗 ^-^