vue vue-i18n插件实现国际化

1.安装

vue2

npm install vue-i18n@8

vue3

npm install vue-i18n@9

安装版本介绍：

vue2–> 小于9

vue3–>大于9

具体版本可以通过下面命令查看:

npm view vue-i18n versions --json

2.在main.js中引入

import Vue from 'vue'
// 国际化插件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale:(function(){
    if(localStorage.getItem('lang')){
      return localStorage.getItem('lang')
    }
    return language
  }()),
  messages:{
     // 当 locale 为 ‘zh-CN'时，版本为中文；当locale 的值为 'en-US'，版本为英文
    'zh-CN': require('./common/lang/zh'),// 中文语言包
    'en-US': require('./common/lang/en')
  }
 })
//创建Vue类的一个实例
const vuuu = new Vue({
  render: h => h(App),
  i18n
}).$mount('#app');

然后再 common 文件夹创建一下文件:

下面演示只做了中英文切换，在vue-i18n中比较简单，只需要两个js文件，通过require的形式引入到main.js。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zrEvc9F1-1650444215102)(D:\study\项目\前端\vue+elementui\vue+elementui.assets\image-20220420163041916.png)]

en.js

export const m = {
  username: 'username',
  password: 'password'
}

zh.js

export const m = {
  username: '用户名',
  password: '密码'
}

上面使用localStorage来保存lang语言类型，当进行切换的时候，会把选择的语言存起来，当再次刷新的时候，选择的语言还在。

3.使用

(1) 在标签中使用

<div class="title">{{$t(m.username)}}</div>

(2) 在input的placeholder

<input type="password" :placeholder="$t(m.password)" maxlength="24" v-model="log_password">

在elementui中使用

  <el-input
     v-validate="'required|min:6|max:10'"
     v-model="loginForm.password"
      prefix-icon="el-icon-unlock"
      :placeholder="$t('m.password')"
     name="password"
  />

(3) 语言切换

changeLangEvent(){
      this.$i18n.locale = 'zh-CN';
      localStorage.setItem("lang","zh-CN");
}