Vue element-ui 国际化 快速上手实践
source link: https://www.cnblogs.com/Olive116/p/13727486.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue element-ui 国际化 快速上手实践
1. 安装vue-i18n
npm install vue-i18n -S
cnpm install vue-i18n -S
2. 在项目目录中创建lang文件夹，并创建三个js文件，为别为：zh.js、en.js、index.js
2.1 zh.js
const zh = {
route: {
Dashboard: '首页',
Documentation: '文档',
Guide: '引导页',
Permission: '权限',
'Icons': '图标',
'Components': '组件',
'Component Mixin': '小组件',
'Back To Top': '返回顶部',
header: {
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
message: '消息',
setting: '个人设置',
logout: '退出登录'
login: {
password: '密码',
username: '用户名'
export default zh
2.2 en.js
const en = {
route: {
Dashboard: 'Dashboard',
Documentation: 'Documentation',
Guide: 'Guide',
Permission: 'Permission',
'Page Permission': 'Page Permission',
'Directive Permission': 'Directive Permission',
'Role Permission': 'Role Permission',
'Icons': 'Icons',
'Components': 'Components',
'Tinymce': 'Tinymce',
'Markdown': 'Markdown',
'JSON Editor': 'JSON Editor',
'SplitPane': 'SplitPane',
'Upload': 'Upload',
'Dropzone': 'Dropzone',
'Sticky': 'Sticky',
'Count To': 'Count To',
'Component Mixin': 'Component Mixin',
'Back To Top': 'Back To Top',
header: {
fullScreen: 'fullScreen',
'cancelFullScreen': 'cancel fullScreen',
message: 'message',
home: 'home',
setting: 'setting',
logout: 'logout',
labelOptions: 'label options',
closeOthers: 'close others'
login: {
system: 'Management System',
password: 'Password',
username: 'Username'
export default en
2.3 index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import store from '@/store'//自定义的store
import elEn from 'element-ui/lib/locale/lang/en' //Element-UI国际化所需
import elZh from 'element-ui/lib/locale/lang/zh-CN' //Element-UI国际化所需
import zh from './zh'//自定义的中文
import en from './en'//自定义的英文
Vue.use(VueI18n)
const messages = {
...zh,
...elZh
...en,
...elEn
const i18n = new VueI18n({
locale: store.getters.lang,//从store中读取存储的语言，zh或en
messages
export default i18n
3. 在main.js中引用i18n
import Element from 'element-ui'
import i18n from './lang/index'
Vue.use(Element, {
i18n:(key, value) => i18n.t(key, value)
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
4.1 双括号{{$t(‘a.bb’)}}
<a >{{ $t('route.'+item.meta.title) }}</a>
4.2 绑定到属性 :prop=”$t(‘a.bb’)”
<item :title="$t('route.'+item.meta.title)" />
其中'route.'的前缀对应与zh.js或en.js中的route节点，如果是别的节点，比如setting节点下的，在使用的时候就应该为$t('settiing.'+item.data)
handleSetLanguage(command) {
console.log(command)
this.$i18n.locale = command
this.$store.dispatch('app/setLang', command)
6. 效果展示
Recommend
-
42
前言 首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。 同构(服务器渲染) Vue同构也就是我们常说的服务器渲染(Server Side Render)，服务器渲染放
-
47
背景 最近参与公司两个国外项目，项目需要对中文替换为葡语和英语，项目重要、时间紧张，正常开发完后需要对中文词条替换成一个方法。 如： var open = '打开' 替换为 var open = intl.get('需要记录的key值').d('打开') 因为
-
10
Vue 3.0 上手（二）高级 API 及生命周期的上手 上一次学习了基础的 API ，这次学习一些高级一点的 API。 Vue 初始化变化（上一篇章遗漏了）原来的写法是： 123
-
6
Vue 3.0 上手（一）基础 API 的上手 2020 年年初，Vue 的 3.0 alpha 版本就发布了。五一前后，beta 版页开始了。按照计划，预计十一前就可以发布正式版了。新的 Vue 和 React 一样，加入了 Hooks 方案，叫...
-
16
最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。 部分网站的当前解决的方案 不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版本的静态及模板文件，通过页面及资源的url进行区分,需...
-
6
摘要：本文将带大家通过几个小实践快速上手MindSpore，其中包括MindSpore端边云统一格式及华为智慧终端背后的黑科技。 MindSpore介绍 MindSpore是一种适用于端边云场景的新型开源深度学习训练/推理框架。 MindSpore提供了友好...
-
6
V2EX › Kubernetes kubernetes（K8S）快速上手教程 + 实践 balabalaguguji · 2 天前 · 2...
-
8
现代 Vue 工程之「国际化 i18n 开发」本篇文章开始，笔者准备开启一个小系列，称之为现代 Vue 工程 ，本篇为第一篇 国际化 i18n 开发
-
6
这两天在搞一个商城国际化的项目，期间解决了N个问题吧例如 vue中国际化 js中国际化接口内容国际化等等，今天主要说的就是css中内容的国际化看图：after css这...
-
10
点击上方蓝字关注我，知识会给你力量
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK