Vue+Element Ui 国际化，使用i18n插件

最新推荐文章于 2024-06-02 20:28:01 发布

weixin_43934513

最新推荐文章于 2024-06-02 20:28:01 发布

阅读量1.7k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43934513/article/details/108735970

版权

本文介绍了如何在Vue+Element UI项目中实现国际化，包括安装i18n插件，设置语言文件夹，配置语言切换，组件内使用，以及处理访问不到i18n的特殊情况，建议将locale存储在localStorage以确保特殊情况下的正常切换。

摘要由CSDN通过智能技术生成

Vue+Element Ui 国际化

在这里插入图片描述

1.i8n插件

//下载
npm install i18n -S
//导入
import VueI18n from 'vue-i18n' 
//挂载
Vue.use(VueI18n)  


//自定义语言包的导入
import en from './i18n/language_en/en.json'
import zh from './i18n/language_zh/zh.json'


//element ui的语言引入
import locale from 'element-ui/lib//locale'
import enLocale from '../node_modules/element-ui/lib/locale/lang/en.js'
import zhLocale from '../node_modules/element-ui/lib/locale/lang/zh-CN'
Vue.use(elementUI, { locale })


//实例化对象
const i18n = new VueI18n({
    locale: localStorage.getItem('locale') || 'zh', // 3.语言标识，默认中文
    messages: {    //语言文件
        en: Object.assign(en, enLocale),//英文
        zh: Object.assign(zh, zhLocale)//中文
    }
})
locale.i18n((key, value) =>