前端实现多语言


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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM