由于項(xiàng)目需求需要配置國際化,使用的UI框架為iview, 按照官方要求下載 vue-i18n(8.14.0),版本大于6.0 按照官方提供的6.0配置方案解決。

第一步:??創(chuàng)建一個(gè)新的目錄 language 目錄, 在該目錄下創(chuàng)建 index.js、en-US.json、zh-CN.json。

　　　index.js 配置i18n: 按照官方文檔引入需要的包，然后配置 (全是按照官方文檔一步一步走)這里直接上代碼

import Vue from 'vue'; import iView from 'iview'; import VueI18n from 'vue-i18n'; import en from 'iview/dist/locale/en-US'; import zh from 'iview/dist/locale/zh-CN'; import US from './en-US'; import CN from './zh-CN'Vue.use(VueI18n); Vue.locale = () => {};const messages = {en: Object.assign(US, en), //將自己的英文包和iview提供的結(jié)合zh: Object.assign(CN, zh) //將自己的中文包和iview提供的結(jié)合 };const i18n = new VueI18n({locale: localStorage.getItem("locale") || 'en', // 設(shè)置語言,如果本地存儲了則用本地的,沒有則默認(rèn) 'en'messages // set locale messages });Vue.use(iView, { i18n: (key, value) => i18n.t(key, value) }) //上面這個(gè)比較重要 按照官網(wǎng)提供的方法 new Vue({ i18n }).$mount('#app'); 運(yùn)行會出錯 提示無法找到 _t 屬性。 按照上述方法配置可以解決此問題(網(wǎng)上找的方法,親測沒問題)//將i18n 導(dǎo)出，在main.js 的 new Vue({}) 中需要配置 export default i18n

　　　main.js 中只需要導(dǎo)入該文件,就可以正常使用了

import i18n from './language'new Vue({el: '#app',router,i18n, //不配置會不生效的 components: { App },template: '<App/>' })

　　　en-US.json 配置英文翻譯 這個(gè)應(yīng)該很簡單 我隨便舉了幾個(gè)例子

{"hello" : "Hello","welcome": "Welcome" }

　　　zh-CN.json 配置中文翻譯 這個(gè)也一樣

{"hello" : "你好","welcome": "歡迎光臨" }

　　在vue文件中使用 {{$t('變量名')}}

<template><div class="containt">{{ $t('welcome') }}</div> </template><script>export default {name: "index"} </script><style scoped>.containt{height: 100%;width: 100%;background-color: #15162C;color: #fff;} </style>

　　結(jié)果:

　　

　　沒有實(shí)現(xiàn)按鍵切換, 所以直接修改language/index.js 文件中的 內(nèi)容將i8n 改為如下:

const i18n = new VueI18n({locale: 'zh', // set localemessages // set locale messages });

　　結(jié)果如下:

　　

　　上面的配置就可以實(shí)現(xiàn)iview的國際化,希望對大家有幫助

?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/webtaotao/p/11381636.html

總結(jié)

以上是生活随笔為你收集整理的iview实现国际化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。