手把手教程 vue-i18n element实现国际化语言切换

苜可

已于 2022-04-07 15:39:49 修改

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue js

于 2020-11-04 10:52:01 首次发布

本文链接：https://blog.csdn.net/qq_43555948/article/details/109485224

版权

本文是一篇详细教程，通过实例演示如何在Vue项目中利用vue-i18n进行国际化语言切换。首先介绍了安装i18n，然后创建英语和中文的语言包，接着在index.js和main.js中配置并引入i18n。在HTML和Vue组件中使用$t()方法调用语言包内容。最后，通过select下拉框的change事件实现语言的动态切换，确保了中英文语言包的格式一致性。

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

vue-i18n 国际化语言切换

在项目开发时，会有各国国家语言切换的需求，这里我使用了i18n来实现项目国际化。

i18n安装
在项目更目录下运行（我个人使用的是cnpm）:

npm install vue-i18n -S

创建语言包
根据自己实际情况在自己喜欢的位置创建语言包目录,如下：
在这里插入图片描述
index.js是国际化配置文件
en.js和zh.js就是我们的语言包了
语言包json如下（此处只截取部分，注意json格式就行了，务必保证中英文语言包json格式一致）：

i18n文件夹里的index.js中写上如下代码

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'//引入element英文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'//引入element中文语言包

import langZh