國際化語言切換/Vue-i18n的使用

多語言切換vue實現國際化插件vue-i18n，參考element-admin中i18n的使用；

閒來無事能夠點點個人博客，有問題的話歡迎指正~www.hollytree.top/

安裝

npm install vue-i18n --save複製代碼

基本使用

main.js中配置

// 引入
import VueI18n from 'vue-i18n'
​
Vue.use(VueI18n)
​
// 配置
const i18n = new VueI18n({
    locale: 'en', // 默認語言
    message: { // 語言文字
        en: {
            msg: {
                hello: 'hello world'
            }
        },
        cn: {
            msg: {
                hello: '你好，世界'
            }
        }
    }
})
// 掛在到Vue實例
new Vue ({
    el: '#app',
    router,
    i18n,
    components: { App },
    template: '<App/>'
})複製代碼

vue組件中使用

<h1>{{ $t('msg.hello') }}</h1>複製代碼

// 切換修改this.$i18n.locale的值便可
this.$i18n.locale = 'en'複製代碼

要切換的文字較少能夠參照以上，若是較多能夠

參考element-admin裏的寫法

• 建立了一個單獨的語言文件夾

  lang

  • en.js

  • index.js

  • zh.js

// en.js 導出英文對象
export default {
  ...
  navbar: {
    logOut: 'Log Out',
    dashboard: 'Dashboard',
    github: 'Github',
    screenfull: 'screenfull',
    theme: 'theme'
  }
  ...
}
// zh.js 導出中文對象
export default {
  ...
  navbar: {
    logOut: '退出登陸',
    dashboard: '首頁',
    github: '項目地址',
    screenfull: '全屏',
    theme: '換膚'
  }
  ...
}複製代碼

配置文件index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui語言包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui語言包
import enLocale from './en' 
import zhLocale from './zh'
​
Vue.use(VueI18n)
​
const messages = {
  en: {
    // ES6擴展運算符合並對象
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
​
// 結合cookie記錄用戶選擇的語言，若無默認en
const i18n = new VueI18n({
  // set locale
  // options: en or zh
  locale: Cookies.get('language') || 'en',
  // set locale messages
  messages
})
​
export default i18n複製代碼

main.js入口文件

//...
import i18n from './lang' // 導入配置文件(默認會導入./lang/index.js)
//...
​
new Vue({
  el: '#app',
  router,
  store,
  i18n, // 掛在到Vue實例上
  render: h => h(App)
}複製代碼

組件中使用

<div class="tips">
<span>{{$t('login.username')}} : admin</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
​複製代碼

handleSetLanguage(lang) {
    // 切換
    this.$i18n.locale = lang
    // 結合vuex （vuex的mutations方法結合了cookie）
    this.$store.dispatch('setLanguage', lang)
    // 切換成功提示
    this.$message({
        message: 'switch language success',
        type: 'success'
    })
}複製代碼

🛰點擊跳轉github地址