保姆级 vue（element-UI) 项目的国际化

vue项目进行国际化的详细介绍(采用element-UI国际化的思想）

• 一，前期搭建环境部分

1） 对一个已有的vue项目，引入vue-i18n 资源包

npm install vue-i18n
//npm i element-ui -S

2） 新建对应的 （zh.json / en.json） 文件 路径随意 ,及json内容格式填写

3）在main.js (App.vue 平级) 引入(添加部分)对应的配置信息

import elementUI from 'element-ui'
import VueI18n from 'vue-i18n'  //1.引入国际化插件,导入相关
//element ui的语言引入
import locale from 'element-ui/lib//locale'
//导入iview
import enLocale from '../node_modules/element-ui/lib/locale/lang/en'
import zhLocale from '../node_modules/element-ui/lib/locale/lang/zh-CN'
//自定义语言包的导入
import en from './i18n/language_en/en.json'
import zh from './i18n/language_zh/zh.json'

Vue.use(elementUI, { locale }) //使用elementui 中的locale
Vue.use(elementUI)
Vue.use(VueI18n)   //2.挂载国际化插件
    
 //3.实例化一个对象
const i18n = new VueI18n({
 // 3.语言标识，寻找本地local值 存储的 没有则 默认中文(zh)
locale: localStorage.getItem('locale') || 'zh', 
    messages: {    //语言文件
        en: Object.assign(en, enLocale),//英文
        zh: Object.assign(zh, zhLocale)//中文
    }
})
locale.i18n((key, value) => i18n.t(key, value))  //4.element ui组件的语言自动切换
//Vue.use(elementUI,{
//  i18n: (key, value) => i18n.t(key, value)
//})

//vue实例中应用 i18n
new Vue({
    render: h => h(App),
    router,
    i18n
}).$mount('#app')
    

4）找个vue 页面 ，或者login.vue 进行接下来得操作，

实现代码：

<div style="text-align:center;margin-top:30px;color:RGB(1,92,242);">
      <span @click="changeLang('zh')">中文</span> ||
      <span @click="changeLang('en')">English</span>
</div>
 //防止进入后台后，locale属性值不存在
 mounted(){
     let localVal=localStorage.getItem('lcoale')
     if(localVal===null){
       localStorage.setItem('locale','zh')
       this.$i18n.locale = localStorage.getItem("locale");
     }else{
       localStorage.setItem('locale',localVal)
       this.$i18n.locale = localStorage.getItem("locale");
     }
  },
 methods: {
     //语言切换
    changeLang(lang) {
      //存储到localStorage中，刷新时能够保存当前的locale
      //切换为中文
      if (lang === "zh") {
		localStorage.removeItem("locale");
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
      }
      //切换为英文
      else if (lang === "en") {
        localStorage.removeItem("locale");
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
      }
    },
 }  

• 二，vue项目国际化格式实战部分（从易到难）

1） 纯文本：

<div>
    登录
</div>

<div>
    {{$t('loginPage.login_btn')}}
</div>

2） 标签属性级别的：

<div
    placeholder="小熊"
    title="小熊"
    label="小熊">
</div>


<div
    :placeholder="$t('loginPage.login_placeHolder_password')"
    :title="$t('loginPage.login_placeHolder_password')"
    :label="$t('packagePage.List_ID')">
</div>
        

3）data(){} 级别

data(){
	play_areas: [{
        value: '',
        //label: '所有'
        label: this.$t('packagePage.List_All')
      }, {
        value: 1,
        //label: '主体'
        label: this.$t('packagePage.List_Main')
      }, {
        value: 2,
		//label: '副体'
        label: this.$t('packagePage.List_Sub')
      }],
	// 数组
      opinion:[
          this.$i18n.locale === "zh" ?"状态":"status",
          this.$i18n.locale === "zh" ?"拒绝":"reject",
          ]
}   

4. method: {} 级别

method: {
    
    async login(){
        //this.title = "用户名或密码不正确"
         this.title=this.$t('loginPage.login_username_password_title')
    }
    
    this.$message({
          type: 'info',
          message: this.$t('aboutProPage.download_cancel')
     })
        
        this.$confirm(
        this.$t('aboutProPage.areyouok_play')+ `【${item.filename}】`, 
        this.$t('aboutProPage.continue'), 
        this.$t('aboutProPage.tip'), {
        confirmButtonText: this.$t('aboutProPage.confirm'),
        cancelButtonText: this.$t('aboutProPage.cancel'),
        type: 'warning'
      })
}

5. js 文件级别

 let menu = {
      workbench: {
        name: localStorage.getItem('locale')==='zh'?'后台首页':'Home',
        icon: 'fa fa-bars',
        index:1,
        show: account.authorityID.includes(41),
        data: [
          {
            name: localStorage.getItem('locale')==='zh'?'后台首页':'Home',
            path: '/default',
            show: true
          }
        ]
      },