[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> ~~~