本文最后更新于:星期日, 五月 31日 2020, 2:37 下午

安装依赖

npm install vue-i18n

在main.js中引入并使用

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文件内容:
    module.exports = {
      language: {
        name: 'English'
      },
      login: {
        welcome: '欢迎您'
      }
    }
  • en.js文件内容:
    module.exports = {
      language: {
        name: '中文'
      },
      login: {
        welcome: 'Welcome'
      }
    }
    上面的name语言之所以是反的,是因为切换按钮的文字显示需要是反,即英文页面显示中文切换按钮,中文页面显示英文切换按钮。

使用i18n

<template>
    <p>{{ $t('language.name') }}</p>
</template>
<script>
    test() {
        var name = this.$t('language.name')
    },
</script>


本文标题:Vue中使用vue-i18n实现中英文切换
文章作者:潘高
发布时间:2019年02月12日 - 10:19:22
最后更新:2020年05月31日 - 14:37:59
原始链接:https://blog.pangao.vip/Vue%E4%B8%AD%E4%BD%BF%E7%94%A8vue-i18n%E5%AE%9E%E7%8E%B0%E4%B8%AD%E8%8B%B1%E6%96%87%E5%88%87%E6%8D%A2/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如何使用Hexo创建个人博客 上一篇
抓包工具Charles从入门到入土 下一篇
如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

 目录