前端实现多语言

现在开发者解决多语言普遍的三种解决方案：

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篇。