vue2, vue3 国际化

vue2 国际化

• 安装依赖

yarn add vue-i18n@8

• 编写国际化代码

创建目录“language”目录存放相关代码，language下创建locales来存放翻译文件

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCn from './locales/zh_CN';
import enUs from './locales/en_US';

Vue.use(VueI18n);

const defaultLocale = process.env.VUE_APP_DEFAULT_LOCALE || 'zh-cn';

const currentLocale = localStorage.getItem('localeLanguage') || defaultLocale;
localStorage.setItem('localeLanguage', currentLocale);

const i18n = new VueI18n({
  locale: currentLocale,
  fallbackLocale: 'zh-cn',
  messages: {
    'zh-cn': zhCn,
    'en-us': enUs,
  },
});

// 更新页面标题（Vue 2 中可以直接使用 Vue 实例的生命周期）
new Vue({
  i18n,
  mounted() {
    document.title = this.$t('site.name');
  },
}).$mount('#app');

export default i18n;

locales如下： en_US.js ,zh_CH.js

格式：

export default {
  home: {
    "home":"首页"
  }

}

• 在main中引用

// 国际化

import i18n from "@/language";
Vue.use(i18n)

先写这么多....