响应式网站建设定制,网站建设需要学编程么,网站开发技术语言,广州网络seo公司依赖的文档开始 | Vue I18n
一、安装
npm install vue-i18n
如果在一个模块系统中使用它#xff0c;你必须通过 Vue.use() 明确地安装 vue-i18n#xff1a;
import Vue from vue
import VueI18n from vue-i18nVue.use(VueI18n)二、使用
在 src 下创建 lang 文件夹 1.准…依赖的文档开始 | Vue I18n
一、安装
npm install vue-i18n
如果在一个模块系统中使用它你必须通过 Vue.use() 明确地安装 vue-i18n
import Vue from vue
import VueI18n from vue-i18nVue.use(VueI18n)二、使用
在 src 下创建 lang 文件夹 1.准备语言包
这里我们用中文和英文的来举例在lang文件下创建en.js和zh,js
// en.js
export default {login: {username: Username,password: Password},
}// zh.js
export default {login: {username: 用户名,password: 密码},
}2、准备翻译的语言环境
在 lang 下创建 index.js使用如上的两种语言包。
// index.js
import Vue from vue
import VueI18n from vue-i18n
import Cookies from js-cookie
import elementEnLocale from element-ui/lib/locale/lang/en // element-ui lang
import elementZhLocale from element-ui/lib/locale/lang/zh-CN // element-ui lang
import enLocale from ./en
import zhLocale from ./zhVue.use(VueI18n)const messages {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale}
}const i18n new VueI18n({// 设置语言 选项 en | zhlocale: Cookies.get(language) || zh,// 设置文本内容messages
})export default i18n3、实现语言翻译
import i18n from ./lang
// use使用添加i18n
Vue.use(Element, {i18n: (key, value) i18n.t(key, value)
})
new Vue({el: #app,router,store,i18n,//注入render: h h(App)
})如何使用
templatediv {{$t(login.password)}}/div
/template
实现语言切换 templateel-dropdown triggerclick classinternational commandhandleSetLanguagedivsvg-icon class-nameinternational-icon icon-classlanguage //divel-dropdown-menu slotdropdownel-dropdown-item :disabledlanguagezh commandzh中文/el-dropdown-itemel-dropdown-item :disabledlanguageen commandenEnglish/el-dropdown-item/el-dropdown-menu/el-dropdown
/templatecomputed: {language() {return this.$store.getters.language}},methods: {handleSetLanguage(lang) {this.$i18n.locale lang; //设置当前语言// this.$store.dispatch(app/setLanguage, lang);this.$message({message: 设置语言成功,type: success})},}
到这里就可以实现语言切换了
