Vue项目国际化配置

Vue2的国际化

# 插件安装
npm install vue-i18n

现在我用的是`"vue-i18n": "^7.8.1"`版本

语言包准备

在src下创建lang文件夹,进行语言配置

// lang/zh.js
export default {
  userManage: {
    fullName: '姓名',
    phoneNumber: '手机号',
    role: '角色',
  }
}

// lang/en.js
export default {
  userManage: {
    fullName: 'Full name',
    phoneNumber: 'Phone number',
    role: 'Role',
  },
}

准备翻译的语言环境信息

// lang/index.js
import Vue from "vue";
import VueI18n from 'vue-i18n'
import zh from "./zh"
import en from "./en"
Vue.use(VueI18n);   // 全局注册国际化包
 
// 准备翻译的语言环境信息
const i18n = new VueI18n({
  locale: "zh",   // 初始化中文
  messages: {
    "zh":zh,
    "en":en
  },
  globalInjection: true, // 全局注册$t方法
}); 
 
export default i18n

注入

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import i18n from './lang/index'

Vue.config.productionTip = false
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

使用

可以直接使用$t('')进行读取数据，在方法中使用this.$t('')读取。

<h1>{{ $t("userManage.fullName") }}:i东东</h1>
cut() {
    console.log(this.$t("userManage.fullName"));
}

// 语言切换
cut() {
  if (this.$i18n.locale === "zh") {// 判断当前语言
    this.$i18n.locale = "en"; // 设置当前语言
  } else {
    this.$i18n.locale = "zh";
  }
}

Vue3和Vue2区别

// lang/index.js
import { createI18n } from 'vue-i18n';   // 与vue2的VueI18n使用方式不同
import zh from './zh';
import en from './en';

const i18n = createI18n({
  locale: 'zh',
  messages: {
    'zh': zh,
    'en': en
  }
});
export default i18n;

// src/main.js
import i18n from './lang';
App.use(i18n);

// 语言切换

// vue3使用方式
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
cut(lang){
  i18n.locale.value = lang // 通过修改value值来进行语言切换
  }

小结

通过以上配置又完成了项目的国际化配置！