Vue I18n 是 Vue.js 的国际化插件

vue I18n 参考链接

NPM安装 vue-i18n 插件

npm install vue-i18n

引入多语言插件 vue-i18n

在 main.js 中引入插件 vue-i18n，然后调用 vue.use()

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 创建实例 - 根据本地语言加载多语言文件
const i18n = new VueI18n({
  locale: 'en', // 默认语言 可以借助cookie来设置和获取本地语言环境 从而加载不同的语言文件
  messages: {
    'zh': require('@/assets/lang/zh_CN'),
    'en': require('@/assets/lang/EN'),
  }
})
// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')

EN.js 文件内容

module.exports = {
  message: {
    test: 'test',
  }
}

zh_CN.js 文件内容

module.exports = {
  message: {
    test: '测试',
  }
}

插件在页面中的使用

• 在 HTML 中使用方法

<p>{{ $t('message.test') }}</p>

• 在 JS 中使用方法

console.log(this.$t('message.test')); // this代表vue根实例
// 获取当前本地语言环境
var currentLanguage  = this.$i18n.locale;