使用vue-i18n實現國際化

下載依賴

yarn add vue-i18n複製程式碼

新建資料夾，檔案

mkdir i18n
cd i18n
touch index.js zh.json en.json複製程式碼

xxx.json為文字替換檔案，如：

{
  "userManagement": "使用者管理",
  "dashboard": "儀表盤",
  "language": "語言", 
  "search": "搜尋"
}複製程式碼

{
  "userManagement": "User Management",
  "dashboard": "Dashboard",
  "language": "Language",
  "search": "Search"
}複製程式碼

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh.json'
import en from './en.json'

Vue.use(VueI18n)

const messages = {  
  zh: {    message: zh  }, 
  en: {    message: en  }
}
const storageLanguage = window.localStorage.getItem('locale_language')
let locale = ''
if (!storageLanguage) {
  window.localStorage.setItem('locale_language', 'zh')
  locale = 'zh'
} else {
  locale = window.localStorage.getItem('locale_language')
}

const i18n = new VueI18n({
  locale,  messages
})

export default i18n複製程式碼

在入口檔案中匯入i18n

import i18n from '@/i18n'
new Vue({
  ...
  i18n,
  ...
})複製程式碼

在模板中替換文案

<template>
  <div>{{ $t('message.search') }}</div>
</template>複製程式碼

這時候還缺乏一個語言切換器

建個切換器元件

。。。（未完待續）

注意：