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

前言

更多内容,请访问我的 个人博客。


安装依赖

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




你可能感兴趣的:(Vue中使用vue-i18n实现中英文切换)