vue+element使用vue-i18n实现国际化，包括element中组件的国际化

原创

于 2020-05-28 16:03:19 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #npm #前端 #chrome #vue.js

这篇博客介绍了如何在Vue项目中结合Element UI使用vue-i18n进行国际化设置。首先通过npm安装vue-i18n，然后创建中英文语言文件cn.js和en.js，并在index.js中整合。接着配置i18n.js，并在main.js中引入和挂载。最后，在页面中可以调用这些国际化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vue-i18n
npm install vue-i18n
在main.js同级目录建立如下i18n文件夹，此处只演示中英文，如需其他语言同理新增相应语言js文件夹和element的语言包并配置好即可。
在这里插入图片描述
cn.js中文件内容：

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //element组件中文语言包
const cn = {
   
   
    index:{
   
   
        'title':'中文',
    },
    ...zhLocale
}
export default cn

en.js中文件内容：

//en.js
import enLocale from 'element-ui/lib/locale/lang/en' //element组件英语语言包
const en = {
   
   
    index:{
   
   
        'title':'Chinese',
    },
    ...enLocale
}
export default en