今天做了一个项目，需要用户点击语言切换时，能够进行中英文的语言切换。后来发现需要使用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等可以根据自己要求命名，格式是这样的就行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    [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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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('')

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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>