在vue構建的項目中，我們常用element-ui插件，在我的博客前面有講述，具體怎么用vue-i18n插件進行國際化開發，但是在前面博客中，如果項目中使用了element-ui插件，插件中的語言文字替換可以結合element-ui插件一同進行。element-ui插件自身也提供了語言包。具體的配置和使用方法參考如下：
默認你已構建好了一個vue項目，在vue項目中安裝vue-i18n以及element-ui插件
cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev
在項目文件中如下圖，創建語言包文件夾i18n文件夾
在main.js用引入i18n.js，以及引入element-ui插件
import Vue from 'vue' import App from './App' import router from './router' // element-ui import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element) // vuei18n import i18n from './i18n/i18n' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, i18n, components: { App }, template: '<App/>' }) 在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 文件夾langs中
index.js
import en from './en'; import cn from './cn'; export default { en: en, cn: cn } en.js
import enLocale from 'element-ui/lib/locale/lang/en' const en = { message: { 'mes': 'hello', }, ...enLocale } export default en; cn.js
import enLocale from 'element-ui/lib/locale/lang/zh-CN' const cn = { message: { 'mes': '你好', }, ...enLocale } export default cn; 通過上述方式的設置，就能完成vue-i18n和element-ui的國際化開發。
總結
以上所述是小編給大家介紹的vue項目中vue-i18n和element-ui國際化開發實現過程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
