Vue-i18n 实现中英文切换

中英文切换

先安装依赖

npm install vue-i18n

创建文件

在根目录新建i18n文件

• langs/cn.js

module.exports = {
	home: {
		title: '首页'
	}
}

• langs/en.js

module.exports = {
	home: {
		title: 'home'
	}
}

• index.js

import VueI18n from 'vue-i18n';
import Vue from 'vue';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: sessionStorage.getItem('lang') || 'cn',
  messages: {
    'cn': require('./langs/cn'),
    'en': require('./langs/en')
  },
});

export default i18n;

在main.js中引入i18n

import i18n from './i18n';

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

App.vue

  //切换中英文的判断条件
    changeLanguage () {
      let islanguage = navigator.language;
      if (islanguage == 'zh-CN') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
      localStorage.setItem('languageSet', this.$i18n.locale);
    },

页面使用方法

<span>{{$t('message.home')}}</span>