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

本文最后更新于:2021年7月29日 下午

安装依赖

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>


如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝


Vue中使用vue-i18n实现中英文切换
https://blog.pangao.vip/Vue中使用vue-i18n实现中英文切换/
作者
潘高
发布于
2019年2月12日 上午
更新于
2021年7月29日 下午
许可协议