什么是web页面国际化

web页面国际化页面国际化，就是可以让网页的文字信息，根据用户的选择，显示中文、英文、韩语、等等

前端应该如何实现国际化

思路：用户点击选自不同的语言，页面就会展示对应的语言文字，类似与翻译功能；首先我们编写我们国际化配置文件，配置文件中是页面需要显示的文字信息，通过用户的选择页面展示不同的配置文件。

1.下载 

npm i vue-i18n

 2:导入

 import VueI18n from 'vue-i18n'

3:注册

 import Vue from 'vue'
  Vue.use(VueI18n)

4:实例化

const  i18n=new VueI18n({
      locale:'当前语言的标识'，   // en:英文  zh:中文
      messages:{
         //  语言包
         en:{
             home:'home'
         },
         zh:{
             home:'首页'
         }
      }
  })

5:暴露出去  

export default   i18n

6:挂载到main.js   

   import i18n from '@/lang'
   new Vue({
       i18n
   })

7.使用： 

<div>{{$t('home')}}</home>

在页面展示配置文件的信息，this.$i18n.locale 来进行语言的切换

代码如下:src/lang/index.js

 

 结合element-ui 使用国际化语言

 在main.js中导入element-ui国际化语言配置

import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

 在.vue文件通过按钮实现语言切换

通过设置路由配置,实现路由中文字的语言切换 

在路由js文件中导入上述文件 import i18n from 'src/lang/index.js' 

 i18n.t=== 等价于.vue文件中的   this.$t

在需要修改的地方替换成对应的

 注意点:

1.切换语言后,需要将语言标识进行存储(利用js-cookie)到本地,实例化时获取本地的语言标识,否则会导致刷新页面后,还原成原来的语言

2.页面中有些切换不生效,因为需要重新刷新页面,重新渲染才会生效,此时需要强制刷新页面

   方式一:this.$router.go(0)  原地重新刷新浏览器

   方式二:利用静默刷新(静默刷新 博客地址:) 提高用户体验