学生请假系统学习七

多语言的配置

1:安装插件

npm install vue-i18n --save-dev

如果是使用过的是TS 请安装指定版本的   默认的版本太低
npm install vue-i18n@8.15.0 

 

2:配置插件(main.js中)

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

Vue.use(VueI18n);
 // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
  locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh': require('./VueI18n/zh'),  //
    'en': require('./VueI18n/en')
  }
})

3:引入
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

4:新建配置文件   在目录新建一个文件夹VueI18n   里面分别新建 en.js   zh.js
分别写入
export  const  lang = {
    username:"username",
    userpwd:"userpwd",
    submit:"submit",
    reset:"reset"
}

export  const  lang = {
    username:"用户名",
    userpwd:"密码",
    submit:"提交",
    reset:"重置"
}
5:使用  页面新建一个按钮  做切换
  <el-button @click="changeLang">
      {{this.$i18n.locale==="zh"?"English":"中文"}}
    </el-button>

6:完善事件
  changeLang(){
       let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
       this.$i18n.locale = lang;
    }

7:使用配置中的字段
       <el-form-item :label="$t('lang.username')" prop="username">
        <el-input type="text" v-model="ruleForm.username"></el-input>
      </el-form-item>

 <el-button type="primary" @click="submitForm('ruleForm')"
          >{{$t('lang.submit')}}</el-button