vue + element-ui 国际化实现
程序员文章站
2022-11-05 10:30:50
1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新建i18n目录,创建一个 index.js;路径src\i18n\index.js 4.在main. ......
1. 安装组件和插件
cnpm i element-ui -s // 安装element
cnpm i vue-i18n -s //安装i18n
2.将国际化资源放在assets目录下
3.在src下新建i18n目录,创建一个 index.js;路径src\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' import zhlocale from 'element-ui/lib/locale/lang/zh-cn' import langzh from "@/assets/languages/zh.js" import langen from "@/assets/languages/en.js" vue.use(vuei18n) const i18n = new vuei18n({ locale: 'zh', messages: { 'zh': {...langzh,...zhlocale}, 'en': {...langen,...enlocale} } }) elementlocale.i18n((key, value) => i18n.t(key, value)) export default i18n
4.在main.js引用
import i18n from './i18n/index' import locale from 'element-ui/lib/locale/lang/en' vue.use(elementui, { locale }) new vue({ el: '#app', i18n, router, components: { app }, template: '<app/>' })
5.页面中使用$t引用
<el-radio v-model="theme" label="1">{{$t('common.risk')}}</el-radio>
6.切换语言
switchlang(val){ this.$i18n.locale=val; //此处val为 zh 或者 en }