引入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