vue-i18n国际化的使用

1.介绍

vue-i18n可以实现网页中的不同语言的切换，话不多说，具体如何使用步骤，将在下面依次演示。

2.安装

与其他插件类似，使用前需在项目中进行安装：

//安装命令
npm install vue-i18n --save

3.配置

在src目录下新增lang目录，在其里创建index.js文件以及base目录，base目录里面创建所需使用的语言相关信息，其目录结构如下图所示：（注：示例仅为中英文切换）

目录结构

• index.js文件的配置，其代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import zh from  './base/zh'
import en from './base/en'

Vue.use(VueI18n)

export default new VueI18n({
//使用的默认语言为‘zh’
  locale: 'zh',
  messages: {
    zh,
    en
  }
})

其中引入的base下的zh文件的代码如下：

export default {
  user: {
    desc: '小白要努力变强！'
  }
}

base下的en文件的代码如下：

export default {
  user: {
    desc: 'Xiaobai should try to become stronger!'
  }
}

• main.js文件里的配置，其代码如下：

import Vue from 'vue'
import App from './App.vue'
import i18n from './lang'

Vue.config.productionTip = false

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

4.使用

在使用过程中，需要注意的是插值表达式的变化，其代码如下所示：

<template>
  <div id="app">
    <h1>{{$t('user.desc')}}</h1>
    <button @click="changeLang('zh')">换成中文</button>
    <button @click="changeLang('en')">换成英文</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

<style>
</style>

默认效果如下图所示：

默认效果图

当点击切换英语时，其效果如下：

点击切换英语之后效果

自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！