Vue使用i18n实现国际化

为什么要国际化？

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。

Vue使用i18n实现国际化

一、安装vue-i18n

Vue2或者Vue3是使用同样的npm包 —— npm install vue-i18n

在Vue2中使用
1、引入vue-i18n

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'cn', // 当前语言标识
  // 语言包对象，message的每个属性都是一个语言包；可以将语言包设置成单独的JS文件
  messages: {
      'cn':{//设置标识语言的名称
        admin: '后台管理系统',//属性名，属性名的使用——$('属性名')
        test: '你好123123',
        language: {
            zh: '中文2',
            en: '中文版',
        },
      },
      'en':{
        admin: 'System',
        test: 'hello',
        language: {
            zh: '中文3',
            en: '英文版',
        },
      },
  }
})

Vue.config.productionTip = false
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

//index.vue在组件页面中使用
<template>
  <div class="home">
    <div>{{$t("language.en")}}</div>
    <button @click="setL">切换</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
     
    }
  },
  mounted(){
  
  },
  methods:{
    setL(){
      this.$i18n.locale="en";//设置语言包的标识语言是'en'
      console.log(this.$t("test"));//输出语言包中的test字段(会根据当前选中的标识语言输出对应的值)
    }
  },
}
</script>

<style lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .home{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
</style>

设置语言标识是’en’，根据语言包，所以控制台输出的是hello

$t(‘这里是语言包的属性名’)

---

在Vue3中使用
1、引入vue-i18n

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';
import {createI18n} from 'vue-i18n'//引入vue-i18n包
let app=createApp(App);
app.use(ElementPlus);
const i18n = createI18n({
  locale: 'en', // 设置语言标识
  messages: {
    // 配置语言
    'cn': {
      lan:"中文"
    },
    'en': {
      lan:"英文"
    }
  }
})
app.use(i18n)

app.use(store).use(router).mount('#app')

//index.vue
<template>
  <h1>{{t('lan')}}</h1>
  <button @click="setL">切换语言</button>
</template>

<script>
import { onMounted, onUnmounted, ref, watch, reactive ,getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n'

export default {
  name: 'Home',
  setup(props,context){
    const { t } = useI18n();
    let { ctx } = getCurrentInstance();
    function setL(){
      ctx.$i18n.locale = 'cn';//设置语言标识为'cn'
      console.log(t('lan'));//根据语言标识输出lan属性的值
    }
    return {
      setL,
      t
    }
  },
}
</script>

<style lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .btn{
    color: blue;
  }
  .el-button{
    /deep/span{
      color: red;
    }
  }
</style>