技術標籤：vue.jses6

1、安裝

npm install vue-i18n  --save

目錄結構
目錄結構如下，en.js和zh.js分別是英文和中文的文字資訊。

1. main.js檔案的配置，在main.js中新增以下跟vue-i18n的使用有關的配置項。

// main.js
import i18n from './locale/i18n/i18n'

new Vue({
  ...
  i18n,
  ...
})

// index.js

import en from './en'
import zh from './zh'

export default {
  en,
  zh
}
 

// i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs/index'

Vue.use(VueI18n)
/**
 * 從localStorage中拿到使用者的語言選擇，如果沒有，那麼預設為中文
 */
const i18n = new VueI18n({
  locale: localStorage.lang || 'zh',
  messages
})

export default i18n

// en.js

const en = {
  message: {
    '100001'
 
: 'one,two,three,four',
    '100002': 'like a song',
    '100003': 'go,go,go'
  }
}

export default en

// zh.js

const zh = {
  message: {
    '100001': '一二三四',
    '100002': '像首歌',
    '100003': '偶雷歐雷歐雷'
  }
}

export default zh

<div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ $t(
 
'message.100001') }}</h2>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
    <button @click="open">彈出框</button>
</div>
  ...
 methods: {
 changeLanguage (lang) {
      if (lang === 'zh') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
      localStorage.setItem('lang', lang)// 存到localStorage中
    },
    open () {
      alert(this.$t('message.100001')) // 在js中使用前面要加 this，message是我們在en.js中和zh.js中自己定義的，可修改
    }
 }