vue elementui 切换语言 -ag凯发k8国际
ag凯发k8国际
收集整理的这篇文章主要介绍了
vue elementui 切换语言
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1.安装插件:npm install vue-i18n --save
2.src下新建i18n文件夹,
i18n文件夹下创建langs文件夹和i18n.js文件
langs文件夹下创建cn.js; en.js; index.js
如图:
3. i18n.js:
import vue from "vue"; import locale from 'element-ui/lib/locale' import vuei18n from "vue-i18n"; import messages from "./langs";vue.use(vuei18n); const i18n = new vuei18n({locale: localstorage.lang || "cn",messages }); locale.i18n((key, value) => i18n.t(key, value))export default i18n;4. cn.js:
import zhlocale from "element-ui/lib/locale/lang/zh-cn"; const cn = {message: {login: "登录",password: "密码不可为空",upassword: "密码",uname: "账户",},...zhlocale };export default cn;5. en.js:
import enlocale from 'element-ui/lib/locale/lang/en' const en = {message: {login: "login",password: "password is required",upassword: "password",uname: "account"},...enlocale };export default en;6.index.js:
import en from "./en"; import cn from "./cn"; export default {en,cn };7. main.js:
import vue from 'vue' import app from './app' import store from './store' import i18n from './i18n/i18n' vue.config.productiontip = falsewindow.app = new vue({store,i18n,render: h => h(app) }).$mount('#app')以上就是配置好了,可以使用了
8. 使用:
//data()中声明 data() {return {lang: "",};}, //作为文本内容,绑定在标签中{{$t('message.login')}}
//作为属性绑定
总结
以上是ag凯发k8国际为你收集整理的vue elementui 切换语言的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: