首先安裝

npm install vue-i18n

然後在main.js 中引入：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置相關檔案

在 src 根目錄新建一個 language 資料夾
裡面放置一個 index.js 和其他語言包，這裡以中英文為例，

// index.js
import messagesEn from './en'
import messagesCn from './cn'

const messages = {
  en: {
    message: messagesEn
  },
  cn: {
    message: messagesCn
  }
}

export default
 
 messages

// en.js
const messagesEn = {
  login: 'Sign in',
  signOut: 'Sign out',
  register: 'Sign up',
  help: 'Help'
  }

// cn.js
const messagesCn = {
  login: '登入 | 立即登入',
  signOut: '退出',
  register: '註冊',
  help: '幫助中心'
 }

然後在 main.js 中引入

import messages from './language/index'

main.js 其他程式碼

function lang () {
// 將選擇的語言存在localStorage中
  let t = window.localStorage.getItem('language')
  if (t) return t
  // 預設中文
  else return 'cn'
}

const language = lang()

// 自定義 window 的 lang 屬性
window.lang = lang()

// 建立一個 i18n 例項
const i18n = new VueI18n({
  locale: language,    // 語言標識
  messages
})

// new vue 中加入 i18n
 

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: { App }
})

切換語言

在切換的元件的事件方法程式碼中加入一下程式碼即可

this.$i18n.locale = 'en'
window.localStorage.setItem('language', 'en')