iview的国际化(vuei18n)

引入VueI18n import VueI18n from “vue-i18n”
注入vue实例
在local文件夹内准备两套文字(所有在项目中所需要用的文字全部存进来,在使用的时候使用$t()将变量包裹)
用一个对象message接收两套文字(并引入iview的语言包,将自己的语言包与iview的语言包合并)
准备一个变量用以切换中英文(存在localstorage中,任何页面点击切换时改变该变量,记得要设置一个默认值为中文或英文)
将变量与两套文字放进vuei18n实例中
最终在全局配置中放进vue实例
任何页面点击切换时改变该变量达到控制中英文的效果

在全局配置中
#main.js

import Vue from "vue"
import iView from "iview"
import i18n from "./locale/index"
import App from "./App.vue"

Vue.use(iView,{
	i18n:(key,value) => i18n.t(key,value)
})

new Vue({
	el:"#app",
	i18n,
	render:h=>(App)
})

local文件夹下创建index.js,
lang-en-us(英文文件夹),
lang-zh-cn(中文文件夹)

#index.js

import Vue from "vue"
import VueI18n from "vue-i18n",
import customZhzn from './lang-zh-zn/zh-CN',
import customEnUs from './lang-en-us/en-US'
import zhCnLocale from "iview/src/locale/lang/zh-CN"
import enUsLocale from 'iview/src/locale/lang/en-US'

Vue.use(VueI18n)

const messages = {
	'zh-CN': Object.assign(zhCnLocale,customZhCn),
	'en-US': Object.assign(enUsLocale,customEnUs)
}

let lang = localstorage.lang?localstorage.lang:"zh-CN";
const i18n = new VueI18n({
	locale:lang,
	messages
})
export default i18n

猜你喜欢

转载自blog.csdn.net/qq_32318311/article/details/88898478
今日推荐