[TOC] #### Vue 國際化 * [ ] 文檔 https://github.com/kazupon/vue-i18n * [ ] 安裝 cnpm i -S vue-i18n * [ ] 使用 1. src 目錄下新建 lang 文件夾  ***** 2. cn.js en.js ~~~ const messages = { home: { title: '書城', hint: '計算機科學和軟件工程', guessYouLike: '猜你喜歡', change: '換一批', clear: '清空', hotSearch: '熱門搜索', historySearch: '搜索歷史', sameAuthor: '與$1同作者', sameReader: '對$1感興趣的人也在讀', readPercent: '閱讀$2的人，$1都在讀', recommend: '熱門推薦', seeAll: '查看全部', readers: '$1人同時在讀', featured: '精選', category: '分類', books: '本書', readNow: '立即閱讀', allBook: '共 $1 本圖書' } } export default messages ~~~ ~~~ const messages = { home: { title:'Book Store', hint: 'Computer Science And Software Engineering', guessYouLike: 'Guess You Like', change: 'Change', clear: 'Clear', hotSearch: 'Hot Search', historySearch: 'History Search', sameAuthor: 'Same author with $1', sameReader: 'Same reader with $1', readPercent: '$1 is reading $2', recommend: 'Recommend', seeAll: 'See all', readers: '$1 is reading', featured: 'Featured', category: 'Category', books: 'books', readNow: 'Read Now', allBook: '$1 books' } } export default messages ~~~ ***** 3. index.js ~~~ import Vue from 'vue' import VueI18N from 'vue-i18n' // 引入中英文 import en from './en' import cn from './cn' import { getLanguage, saveLanguage } from '@/utils/storages' // 插件注冊 Vue.use(VueI18N) const messages = { en, cn } // 從緩存中獲取 let locale= getLanguage() // 不存在 則 設置一個默認語言，然后保存在緩存中 if (!locale) { locale= 'cn' saveLanguage( locale) } // i18n 配置 const i18n = new VueI18N({ locale, // 語言 messages // 語言包 }) export default i18n ~~~ ***** ~~~ import Storage from 'web-storage-cache' const localStorage = new Storage() export function setLocalStorage(key, value) { return localStorage.set(key, value) } export function getLocalStorage(key) { return localStorage.get(key) } export function removeLocalStorage(key) { return localStorage.delete(key) } export function clearLocalStorage() { return localStorage.clear() } // 獲取語言 export function getLanguage() { return getLocalStorage('locale') } // 設置語言 export function saveLanguage(value) { return setLocalStorage('locale', value) } ~~~ ***** 4. man.js 引入 國際化  ~~~ import 'babel-polyfill' import Vue from 'vue' import './cube-ui' import App from './App.vue' import router from './router' import store from './store' import i18n from './lang' import 'amfe-flexible' import fastClick from 'fastclick' import 'assets/stylus/base.styl' fastClick.attach(document.body) Vue.config.productionTip = false new Vue({ router, store, i18n, render: h => h(App) }).$mount('#app') ~~~ ***** 5. 組件中使用  ~~~ <div class="title"> <div class="title-down" @click="hidePopUp"><i class="icon-down2"></i></div> {{$t('book.selectFont')}} </div> ~~~