Vue中使用vue-i18n實現中英文切換

前言

更多內容，請訪問個人 我的博客。

---

安裝依賴

npm install vue-i18n
複製代碼

在main.js中引入並使用

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: window.localStorage.getItem('user_lang') == null ? "cn" : window.localStorage.getItem('user_lang'),    // 語言標識
  messages: {
    'cn': require('./utils/lang/cn'),   // 中文語言包
    'en': require('./utils/lang/en')    // 英文語言包
  },
})
複製代碼

多語言的js文件

• cn.js文件內容：

  module.exports = {
    language: {
      name: 'English'
    },
    login: {
      welcome: '歡迎您'
    }
  }
  複製代碼

• en.js文件內容：

  module.exports = {
    language: {
      name: '中文'
    },
    login: {
      welcome: 'Welcome'
    }
  }
  複製代碼

上面的name語言之因此是反的，是由於切換按鈕的文字顯示須要是反，即英文頁面顯示中文切換按鈕，中文頁面顯示英文切換按鈕。

使用i18n

<template>
    <p>{{ $t('language.name') }}</p>
</template>
<script>
    test() {
        var name = this.$t('language.name')
    },
</script>
複製代碼