前端實現多語言

現在開發者解決多語言普遍的三種解決方案：

1. 為每個頁面提供每種語言的相關頁面。
2. 第二種是把內容從表現形式中分離出來，做不同語言的內容文件。
3. 第三種是動態翻譯頁面內容。第三種很少見，而且機器翻譯技術還很難達到人們的預期。

demo預覽地址：demo

實現方法：

1. 比較笨的方法，就是把所有的語言寫好，放在同一個頁面，加上不同的class，用jquery控制class的顯示和隱藏。
2. 將控制語言的開關switch存在cookie里。為了避免頁面同時加載所有語言，可以先讓頁面隱藏，用jquery控制延遲顯示。

 

通過vue l18m來實現多語言切換

簡介：vue l18n是vue.js的國際化插件

 

1. 安裝：

npm install vue-l18n

 

2. 引入：

main.js

import VueI18n from 'vue-i18n'

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'zh-CN',    // 語言標識, 通過切換locale的值來實現語言切換,this.$i18n.locale 
  messages: {
    'zh-CN': require('./lang/zh'),   // 中文語言包
    'en-US': require('./lang//en')    // 英文語言包
  }
})

new Vue({

  router,

  store,

  render: h => h(App),

  i18n,  // 不要忘了在這里添加

}).$mount('#app')

3. 在需要切換語言的頁面中，可以通過這種方式來獲得當前語言

console.log（this.$i18n.locale）

 

4. 語言包

lang/en.js

export const lang = {
    homeOverview:'Home overview',
    firmOverview:'firmOverview',
    firmReports:'firmReports',
    firmAppendix:'firmAppendix',
    firmIndex:'firmIndex',
    firmAnalysis:'firmAnalysis',
    firmNews:'firmNews',
    firmOther:'firmOther'
  }

5. 模板渲染

<p>{{ $t("lang.homeOverview") }}</p>

預覽結果：demo

 

 

第10篇。