vue國際化demo
阿新 • • 發佈：2018-09-27
ips 文件 不同 share 代碼 one mis .get 國際 最近自己研究vue-i18n做了個vue國際化的demo，總結如下
第一步、安裝vue-i18n
npm install vue-i18n
第二步、在main.js中引入vue-i18n（如下圖）
第三步、建兩個語言包文件，目錄結構如下圖：
第四步、給這兩個文件裏寫靜態的頁面展示數據
1、en.js(內容如下圖)
2、zh.js(內容如下圖)
第五步：1、html裏面使用如下圖
第六步：接口層面實現多語言，方案為： 在HTTP請求頭中攜帶語言信息，接口服務根據語言，返回不同的語言環境響應體。
本項目 vue.js 我們使用了 axios 組件，實現的話就統一在HTTP請求request攔截器中處理，代碼如下：(具體內容見axios.js)
// http request 攔截器 axios.interceptors.request.use( config => { // 語言環境設置 let currentLang = utils.get(‘CurrentLang‘) if (currentLang === ‘en-US‘) { config.headers[‘X-Client-Language‘] = ‘en-US‘ } else { config.headers[‘X-Client-Language‘] = ‘zh-CN‘ } return config }, err => { return Promise.reject(err) })
後續一：因為提示性語言用的地方比較多都寫在組件內部顯得重復（見one.vue組件裏的methods裏的clickfun事件），我在這裏把它寫了專門的JS文件（見tips.js），哪裏用到哪裏調用（見one01.vue裏的methods裏的clickfun事件）【後續一裏提到的幾個文件都在我的有道雲筆記裏 鏈接：http://note.youdao.com/noteshare?id=ba03e864d2cbb8cbe759245cf86d6359】
第三步、建兩個語言包文件，目錄結構如下圖：
第四步、給這兩個文件裏寫靜態的頁面展示數據
1、en.js(內容如下圖)
2、zh.js(內容如下圖)
第五步：1、html裏面使用如下圖
第六步：接口層面實現多語言，方案為： 在HTTP請求頭中攜帶語言信息，接口服務根據語言，返回不同的語言環境響應體。
本項目 vue.js 我們使用了 axios 組件，實現的話就統一在HTTP請求request攔截器中處理，代碼如下：(具體內容見axios.js)
// http request 攔截器 axios.interceptors.request.use( config => { // 語言環境設置 let currentLang = utils.get(‘CurrentLang‘) if (currentLang === ‘en-US‘) { config.headers[‘X-Client-Language‘] = ‘en-US‘ } else { config.headers[‘X-Client-Language‘] = ‘zh-CN‘ } return config }, err => { return Promise.reject(err) })
後續一：因為提示性語言用的地方比較多都寫在組件內部顯得重復（見one.vue組件裏的methods裏的clickfun事件），我在這裏把它寫了專門的JS文件（見tips.js），哪裏用到哪裏調用（見one01.vue裏的methods裏的clickfun事件）【後續一裏提到的幾個文件都在我的有道雲筆記裏 鏈接：http://note.youdao.com/noteshare?id=ba03e864d2cbb8cbe759245cf86d6359】
vue國際化demo