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>
默认效果如下图所示：
默认效果图
当点击切换英语时，其效果如下：
点击切换英语之后效果
同理，点击切换中文，效果则会变化成默认效果（中文效果），在这就不列图了，有兴趣的小伙伴自己试一试，至此我们网站的语言国际化就完成了。
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
