Vue中使用vue-i18n实现中英文切换

安装依赖

1
npm install vue-i18n

在main.js中引入并使用

1
2
3
4
5
6
7
8
9
10
11
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: window.localStorage.getItem('user_lang') == null ? "cn" : window.localStorage.getItem('user_lang'), // 语言标识
messages: {
'cn': require('./utils/lang/cn'), // 中文语言包
'en': require('./utils/lang/en') // 英文语言包
},
})

多语言的js文件

  • cn.js文件内容:

    1
    2
    3
    4
    5
    6
    7
    8
    module.exports = {
    language: {
    name: 'English'
    },
    login: {
    welcome: '欢迎您'
    }
    }
  • en.js文件内容:

    1
    2
    3
    4
    5
    6
    7
    8
    module.exports = {
    language: {
    name: '中文'
    },
    login: {
    welcome: 'Welcome'
    }
    }

上面的name语言之所以是反的,是因为切换按钮的文字显示需要是反,即英文页面显示中文切换按钮,中文页面显示英文切换按钮。

使用i18n

1
2
3
4
5
6
7
8
<template>
<p>{{ $t('language.name') }}</p>
</template>
<script>
test() {
var name = this.$t('language.name')
},
</script>

-------------已经触及底线  感谢您的阅读-------------
潘高 wechat
公众号:潘高陪你学编程
如果你觉得这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。

本文标题:Vue中使用vue-i18n实现中英文切换

文章作者:潘高

发布时间:2019年02月12日 - 10:19:22

最后更新:2019年03月08日 - 10:43:32

原始链接:https://blog.pangao.vip/Vue中使用vue-i18n实现中英文切换/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。