vue中i18n的安装与几种使用方式详解_vue.js_

npm install vue-i18n 

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

import VueI18n from 'vue-i18n' import Vue from 'vue' //引入element的语言包 import localeLib from 'element-ui/lib/locale' //本地 import enLocale from "element-ui/lib/locale/lang/en"; //英文 import zhLocale from "element-ui/lib/locale/lang/zh-CN"; //中文 // 引入需要语言包也可是js文件，export default抛出语言包的对象 import en from './lang/saas-en.json' import zh from'./lang/saas-zh-CN.json' Vue.use(VueI18n) //获取本地选择的语言 var lang = Cookie.get("bx_user_lang") || navigator.language || navigator.userLanguage || "en"; const i18n = new VueI18n({ locale: lang, // 语言标识 fallbackLocale: 'zh-CN', messages: { en: Object.assign(en, enLocale), "zh-CN": Object.assign(zh, zhLocale) } }) // 设置语言 localeLib.i18n((key, value) => i18n.t(key, value)) export default i18n 

import i18n from './i18n/i18n'; /* eslint-disable no-new */ new Vue({ el: '#app', router, store, i18n, //很重要，别忘记 components: { App }, template: '' }) 

 // 删除人员 const delMenu = async (row) => { await deletePerson(row) proxy.$message.success(proxy.$t("person.message.success.delete")) } 

import i18n from "@/i18n"; export function translateTitle(title: string) { const { t, te } = i18n.global if (te(`${title}`)) return t(`${title}`) return title; }

import { translateText } from "@/utils/i18n" //在组件中引入 import { ElMessage } from 'element-plus' const tots=()=>{ ElMessage.success(translateText('person.message.success')) }