vue多语言国际化

295 阅读1分钟

1、引入

  npm i vue-i18n -S

**2、main.js **

import Vue from 'vue'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);			// 挂在i18n插件

export const i18n = new VueI18n({
  locale: localStorage.lang || 'zh-CN',	// 通过this.$i18n.locale的值实现语言切换
  messages: {
    'zh-CN': require('@/assets/i18n/lang/zh'),	// 中文语言包
    'en-US': require('@/assets/i18n/lang/en')	// 英文语言包
  }
});

挂载在 vue 的原型上

if (this.$i18n.locale === "zh-CN") {
  this.$i18n.locale = "en-US"; // 切换语言
  localStorage.setItem("lang", "en-US");
} else {
  this.$i18n.locale = "zh-CN"; // 切换语言
  localStorage.setItem("lang", "zh-CN");
}