vue 国际化配置

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步：

　　创建lang文件夹

 index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  },
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage
  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zn'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})
export default i18n

View Code

zn.js

export default {
  header:{
    hederTitle:'个人中心'
  }
}

en.js

export default {
  header:{
    hederTitle:'centerPeople'
  }
}

View Code

第二步：在main.js引入

import Cookies from 'js-cookie'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入国际化
// import VueI18n from 'vue-i18n'
import i18n from './common/lang' // internationalization
Vue.use(ElementUI, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({
  i18n,  // 最后
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第三步：定义转化方法（在utils文件下创建i18n.js）

// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(objName,title) {
  const hasKey = this.$te(objName+'.' + title)
  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t(objName+'.' + title)
    return translatedTitle
  }
  return title
}

View Code

第四步：在页面引入

<template>
  <div class="header_warp">
    <div class="header_l">{{ generateTitle('header','hederTitle') }}</div>
    <div class="header_r">
      <!-- <img class="userImg" src="../assets/mao.jpg" alt=""> -->
      <span>{{username}}</span>
      <span class="out" @click='loginOut'><img src="../assets/icon/loginout.png">退出</span>
      <span class="top_btn" @click="changeLangEvent">{{$i18n.locale =='zh'?'中文':'英文'}}</span>
    </div>
  </div>
</template>
<script>
import { generateTitle } from '@/utils/i18n'
import { loginOut } from "@/api/login";
import { setCookie,delCookie } from "@/utils/cookieUtils";
export default {
  name: 'HeaderWarp',
  data(){
      return{
        hederTitle:"个人中心"
      }
  },
   computed: {
        username () {
        return '你好，'+this.$store.state.username
        }
    },
  methods:{
    generateTitle,
    loginOut:function() {
        loginOut().then(()=>{
        // if(process.env.NODE_ENV === "development" ){
        //   delCookie('dj_mplan_cce_login'); 
        // }
          delCookie('dj_mplan_cce_login'); 
          this.$store.commit('usernameCommit','');
          this.$router.push('/login')
        })
    },
    changeLangEvent() {
      console.log('changeLangEvent');
      this.$confirm('确定切换语言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if ( this.$i18n.locale === 'zh' ) {
          this.$i18n.locale = 'en';//关键语句
          // console.log('en')
        }else {
          this.$i18n.locale = 'zh';//关键语句
          // console.log('zh')
        }
      }).catch(() => {
        // console.log('catch');
        this.$message({
          type: 'info',
        });
      });
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top_btn{display: inline-block;padding: 0px 20px;}
/* background: url(../assets/icon/loginout.png) left center no-repeat;padding-left: 20px; */
.out{display: inline-vlock;margin-left: 14px;}
.out img{ width: 16px;position: relative;top:3px;}
.header_warp{display: flex;align-items: center;height: 60px;line-height: 60px;color: #333333;background-color: #ffffff;padding: 0px 20px;box-shadow:10px 10px 3px -9px #adadad ;}
.header_l{flex: 4;text-align: left;font-size: 22px;font-weight: 600;}
.header_r{flex: 1;text-align: right;font-size: 14px;cursor: pointer;}
.userImg{width: 30px;height: 30px;border-radius: 15px;overflow: hidden;vertical-align: middle;margin-right: 10px;}
</style>

View Code

以上是 vue 国际化配置 的全部内容， 来源链接： utcz.com/z/380935.html

回到顶部