前端的多语种显示 Vue i18n

并行处理系统的国际化主要包括前端的国际化、后端的国际化和算法的国际化。前端的国际化包括css、js和html文件的国际化，后端的国际化包括jsp、java代码的国际化。

什么是国际化？
在计算机领域，国际化是指设计能够适应各种区域和语言环境的软件的过程。
国际化就是一个网站、应用可以实现语言的切换

需求很简单，就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。

//   e.g.
//   - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }`
//   - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']`

使用vue-i18n实现多语言
在这里插入图片描述

怎么做，现在有什么方法，都有什么优劣，为什么你用这种方法不用其他的

利用vue-i18n实现多语言切换效果的方法

演示实例二：
在这里插入图片描述
源码：

en.js

export const m = { 
    hello: 'good good study, day day up!',
    welcome: 'Welcome to Beijing.',  
    today: 'Today is ',  
    week: {  
      sun: 'Sunday',  
      mon: 'Monday',  
      tues: 'Tuesday',  
      wed: 'Wednesday',  
      thur: 'Thursday',  
      fri: 'Friday',  
      sat: 'Saturday'  
    } 
  }

zh.js

export const m = {
    hello: '好好学习，天天向上！',
    welcome: '欢迎来到北京',  
    today: '今天是',  
    week: {  
      sun: '星期日',  
      mon: '星期一',  
      tues: '星期二',  
      wed: '星期三',  
      thur: '星期四',  
      fri: '星期五',  
      sat: '星期六'  
    }  
  }

main.js

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import 'amfe-flexible'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale:  localStorage.getItem('locale') || 'zh-CN',    // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换  
  messages: {
      'zh-CN': require('./common/lang/zh'),
      'en-US': require('./common/lang/en')
  }
})
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  i18n,
}).$mount('#app')

helloWorld.vue

扫描二维码关注公众号，回复： 11712723 查看本文章

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <h1 style="font-size: 16px; text-align: center;">{
   
   { $t("m.hello") }}</h1>
    <button @click="changeLang">切换语言</button>  
    <h1>{
   
   {$t('m.welcome')}}</h1>  
    <h3>{
   
   {$t('m.today')}}{
   
   {weekname}}</h3>  
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    changeLang() {  
      this.lang = localStorage.getItem('locale') || 'zh-CN';  
      if ( this.lang === 'zh-CN' ) {  
        this.lang = 'en-US';  
        this.$i18n.locale = this.lang;  
      } else {  
        this.lang = 'zh-CN';  
        this.$i18n.locale = this.lang;  
      }  
      localStorage.setItem('locale', this.lang);  
      let week = this.getWeek();  
      this.weekname = week;  
    },
    getWeek() {
      let week = new Date().getDay();  
      let day = 'm.week.sun';  
      switch (week) {  
        case 0:  
        day = 'm.week.sun';  
        break;  
        case 1:  
        day = 'm.week.mon';  
        break;  
        case 2:  
        day = 'm.week.tues';  
        break;  
        case 3:  
        day = 'm.week.wed';  
        break;  
        case 4:  
        day = 'm.week.thur';  
        break;  
        case 5:  
        day = 'm.week.fri';  
        break;  
        case 6:  
        day = 'm.week.sat';  
        break;  
      }  
      return this.$i18n.t(day);
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化
 前端框架Vue（1）——vue（脚手架）推荐开发环境（转）
github项目
网易云项目

如何让一个vue项目支持多语言（vue-i18n）
使用ElementUI
在这里插入图片描述

我们需要安装 vue-i18n, 推荐 npm 包依赖： npm install vue-i18n
github传送门

在这里插入图片描述
或者

引入框架ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

ElementUI官方文档
样式文件单独引入
在这里插入图片描述

上面链接
参考：
Java WEB系统国际化经验总结
 jQuery.i18n.properties 简介
 系统国际化设计方案

前端的多语种显示 Vue i18n

猜你喜欢