1.項目目錄結構
├── build 構建相關配置文件
| |── index.js webpack的基礎配置入口
├── mock 項目mock 模擬數據 在后端沒有提供接口的情況下可以攔截自己的數據進行開發
├── public 靜態資源
│ │── favicon.ico favicon圖標
│ └── index.html html模板，主html入口
├── dist 項目構建后生成的目錄結構
| |── index.html
| |── static
| |── css
| |── js
| |── images
├── src 源代碼
│ ├── api 存放數據請求的接口，目錄下的js命名（模塊名.js）
│ ├── assets 存放靜態資源，如字體,圖片,公共樣式，js等
│ ├── components 全局公用組件 如有一個獨立功能需要建立多個組件請建立文件夾
│ ├── directive 全局指令
│ ├── filters 全局 filter
│ ├── icons 項目所有 svg icons
│ ├── language 多語言配置
│ ├── layout 全局 layout，框架布局目錄
│ ├── router 路由
│ ├── store 全局 store管理 VueX目錄
│ ├── styles 全局樣式
│ ├── utils 全局公用方法
│ ├── views views 所有頁面 主要用於存放導航或者側邊欄，路由配置成嵌套路由即可存在導航或側邊欄
│ ├── App.vue 入口頁面
│ ├── main.js 入口文件 加載組件 初始化等
│ └── permission.js 權限管理
├── tests 測試
├── .env.xxx 環境變量配置，測試，線上等
├── .eslintrc.js eslint 配置項
├── .babelrc babel-loader 配置
├── .travis.yml 自動化CI配置
├── vue.config.js vue-cli 配置
├── postcss.config.js postcss 配置
└── package.json package.json，依賴安裝及版本
2.安裝多語言模塊 npm install vue-i18n --save
創建目錄 /src/language，並分別創建文件 en.json、index.js、lang.js、zh.json，以中英文語言切換為例，如果需要增加其他語言，可增加相應的 .json文件即可
├── src 源代碼
│ ├── language 多語言配置目錄
│ │ │── index.js 多語言核心入口文件
│ │ │── lang.js 存儲用戶的語言選擇
│ │ │── en.json 中文配置文件
│ │ │── zh.json 英文配置文件
......
/src/language/index.js 文件的內容如下：
import Vue from 'vue' import VueI18n from 'vue-i18n' import LangStorage from './lang' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' Vue.use(VueI18n) const DEFAULT_LANG = 'zh' const LOCALE_KEY = 'localeLanguage' const locales = { zh: Object.assign(require('./zh.json'), zhLocale), en: Object.assign(require('./en.json'), enLocale) } const i18n = new VueI18n({ locale: LangStorage.getLang('zh'), messages: locales }) export const setup = lang => { if (lang === undefined) { lang = window.localStorage.getItem(LOCALE_KEY) if (locales[lang] === undefined) { lang = DEFAULT_LANG } } console.log(lang) window.localStorage.setItem(LOCALE_KEY, lang) Object.keys(locales).forEach(lang => { document.body.classList.remove(`lang-${lang}`) }) document.body.classList.add(`lang-${lang}`) document.body.setAttribute('lang', lang) Vue.config.lang = lang i18n.locale = lang } window.i18n = i18n export default i18n
/src/language/index.js 文件的內容如下：
export default { setLang (lang) { window.localStorage.setItem('user_lang', lang) }, getLang (defaultLang) { const localLang = window.localStorage.getItem('user_lang') if (localLang === null) { return defaultLang } else { return localLang } } }
/src/language/zh.json 文件的內容如下：
{ "main": { "hello": "你好" }, "Form": "表單", "router": { "maybe": "也許" } }
/src/language/en.json 文件的內容如下：
{ "main": { "hello": "Hello" }, "Form": "Form", "router": { "maybe": "Maybe" } }
/src/main.js中新增代碼如下：
import i18n from './language' Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }) new Vue({ el: '#app', i18n, router, store, render: h => h(App) })
3.模板中使用
<el-button @click="changeLanguage">中英切換</el-button>
<div>{{$t("main.hello")}}</div>
......
import { setup } from '@/language/index.js'
import LangStorage from '@/language/lang'
methods:{
changeLanguage () {
if (this.$i18n.locale === 'en') {
setup('zh')
} else {
setup('en')
}
LangStorage.setLang(this.$i18n.locale)
}
}
點擊按鈕即可查看切換效果~~