个人博客：https://maxusun.github.io/
转载请注明出处

今天做了一个项目，需要用户点击语言切换时，能够进行中英文的语言切换。后来发现需要使用vue-i18n

1. 安装vue-i18n
   直接在命令行输入npm install vue-i18n --save-dev。或者在package.json文件的devDependencies添加"vue-i18n": "^8.18.2",。然后运行npm install

2. 在src/components下新建一个文件夹lang，并在lang下新建zh.js和en.js文件。然后将自己需要切换的文字都对应写在这两个文件里。q其中的language,user,signin等可以根据自己要求命名，格式是这样的就行。

[src/components/lang/zh.js]
module.exports = {
    language:{
        language:'语言',
        zh:'中文',
        en:'英文',
        switch:'English'
    },
    user:{
        signin:'登录',
        signup:'注册',
        logout:'退出',
        changeuser:'切换账号',
    },
}

[src/components/lang/en.js]
module.exports = {
    language:{
        language:'Language',
        zh:'Chinese',
        en:'English',
        switch:'中文'
    },
    user:{
        signin:'Sign in',
        signup:'Sign up',
        logout:'Log out',
        changeuser:'Switch account',
    }
}

3. 在main.js下引入及注册vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
    locale:localStorage.getItem('languageSet')||'zh',   //从localStorage里获取用户中英文选择，没有则默认中文
    messages:{
        'zh':require('./components/lang/zh'),
        'en':require('./components/lang/en')
    }
})

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

4. 在dom里使用$t('')，若在js里使用则是this.$t('')

<el-submenu index="5">
    <template slot="title">{{$t('language.language')}}</template>
    <el-menu-item index="5-1" @click="changeZh">{{$t('language.zh')}}</el-menu-item>
    <el-menu-item index="5-2" @click="changeEng">{{$t('language.en')}}</el-menu-item>
</el-submenu>

<script>
    export default {
        // 选择英语
        changeEng(){
            this.$i18n.locale = 'en',
            localStorage.setItem('languageSet',this.$i18n.locale)   //将用户设置存储到localStorage以便用户下次打开时使用此设置
        },
        // 选择中文
        changeZh(){
            this.$i18n.locale='zh',
            localStorage.setItem('languageSet',this.$i18n.locale)   //将用户设置存储到localStorage以便用户下次打开时使用此设置
        }
    }
</script>