记录vue国际化i18n的使用

末蓝、 2023-07-10 08:06 10阅读 0赞

vue框架如果考虑多语言，可以使用vue-i18n，安装的话，直接通过npm install vue-i18n --save将依赖库加入到当前vue项目中。另外，我们需要配置多语言文件，这里以中文和英文为例，我们在assets目录下新建languages目录，然后新建zh.json和en.json，分别用于存放各自语言对应的国际化文件。

多语言文件既然是json格式，自然可以包含对象，以及对象嵌套，这里我们通过对象属性以及嵌套的方式来组织我们的多语言文件。内容分别如下：

zh.json

{
    	"common":{
    		"name":"用户名",
    		"password":"密码"
    	},
    	"Settings":{
    		"set":"设置",
    		"ok":"确定",
    		"cancel":"取消",
    		"languageSelect":"语言选择"
    	}
    }

en.json

{
    	"common":{
    		"name":"username",
    		"password":"password"
    	},
    	"Settings":{
    		"set":"Set",
    		"ok":"Ok",
    		"cancel":"Cancel",
    		"languageSelect":"Language Select"
    	}
    }

两份文件的内容，最好一一对应，虽然理论上只需要两边的内容能够对应上就行。

接下来，就是在页面上如何引入vue-i18n了，我们需要在vue挂载对象上加入i18n对象。这里以普通的vue项目为例，我们在main.js文件中，通过import Vue-I18n from 'vue-i18n'的方式引入i18n，然后需要通过Vue.use(Vue-I18n)来表示在vue项目中使用i18n，接着需要引入我们前面配置的国际化文件，最后再将其加入vue挂载点上，代码如下所示：

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import VueI18n from 'vue-i18n'
    
    Vue.config.productionTip = false
    Vue.use(VueI18n)
    
    const i18n = new VueI18n({
      locale: 'zh',
      messages: {
        'zh': require('@/assets/languages/zh.json'),
        'en': require('@/assets/languages/en.json')
      }
    })
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      i18n,
      components: { App },
      template: '<App/>'
    })

这里需要注意，我们默认的语言是中文，所以需要设置i18n.locale='zh'。我们这样，其实就已经做好了准备工作，剩下就是如何在页面中使用多语言了，一般在html元素标签体中，需要加入大括号\{ \{\}\}，然后在大括号中使用$t('Settings.set')，在javascript代码中，我们不需要大括号了，直接$t("Settings.set")就可以了。

我们新增一个设置语言的页面，内容如下所示：

Settings.vue

<template>
      <div class="setting">
        <h2>{
       {$t('Settings.languageSelect')}}</h2>
        <button @click="changeZh">中文</button>
        <button @click="changeEn">English</button>
      </div>
    </template>
    <script>
    export default {
      name: 'Settings',
      data () {
        return {}
      },
      methods: {
        changeZh () {
          this.$i18n.locale = 'zh'
        },
        changeEn () {
          this.$i18n.locale = 'en'
        }
      }
    }
    </script>

语言设置页面很简单，就是两个按钮，点击他们就可以切换语言了，这里切换语言，就是修改i18n.locale的值了，前面提到过，默认是'zh'，如果修改为英文就是'en'。当修改了语言之后，页面内容会发生变化。我们来看看实际运行的效果：

![202002292317139.gif][]

vue-i18n多语言，其实主要关注两个地方，一个是在html标签体内，如何使用\{ \{$t('Settings.set')\}\}，另外一个就是在javascript代码中如何使用 直接$t('Settings.set')。他们之间的区别就是在标签体内，多了双大括号\{ \{\}\}。

[202002292317139.gif]: https://img-blog.csdnimg.cn/202002292317139.gif