vue+elementUI+vue-i18n实现中英文切换。

安装: npm install vue-i18n

vue.js+vue-i18n国际化

在main.js同级建i18n文件夹，并里面建i18n.js、langs文件夹，langs文件夹下建en.js、cn.js
目录如下:

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── i18n
│   ├── i18n.js
│   └── langs
│       ├── cn.js
│       ├── en.js
│       └── index.js
├── main.js
└── store.js

//i18n.jsimport Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'Vue.use(VueI18n)
const i18n = new VueI18n({locale: localStorage.lang || 'cn',messages
})export default i18n

//langs/index.jsimport en from './en'
import cn from './cn'
export default {en,cn
}

//en.js
const en = {message: {'hello': 'hello, world',}
}export default en

//cn.js
const cn = {message: {'hello': '你好，世界',}
}export default cn

//main.jsimport Vue from 'vue'
import App from './App'
import store from './store'
import i18n from './i18n/i18n'
Vue.config.productionTip = falsewindow.app = new Vue({store,i18n,render: h => h(App)
}).$mount('#app')

接下来是在页面中使用、切换语言。

//html:
<p>{{$t('message.hello')}}</p> // hello, world

//js切换语言
data() {return {lang: 'en'}
},
methods: {switchLang()  {this.$i18n.locale = this.lang }
}

通过改变this.$i18n.locale的值就可以自动切换页面的语言了

vue.js+vue-i18n+elementUI国际化

接下来是将elementUI国际化，更改的地方不多，代码如下

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'Vue.use(VueI18n)
const i18n = new VueI18n({locale: localStorage.lang || 'cn',messages
})
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换export default i18n

//en.jsimport enLocale from 'element-ui/lib/locale/lang/en'
const en = {message: {'hello': 'hello, world',},...enLocale
}export default en

//cn.jsimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {message: {'hello': '你好，世界',},...zhLocale
}export default cn

main.js保持不变，现在切换中英文，elementUI内部语言也会改变。

vue+elementUI+vue-i18n实现中英文切换。相关推荐

vue2项目使用i18n进行中英文切换
vue+element 使用i18n进行中英文切换文章目录前言一.下载vue-i18n插件二.定义中英文两套js文件,配置i18n,并在main.js中引入三.通过点击事件切换语言四.i1 ...
vue中如何实现实现中英文切换
一.安装 vue-i18n插件 npm i vue-i18n 二.main.js文件的配置 import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件 ...
windows下安装python的i18n_python国际化(i18n)和中英文切换
[1.到Flex SDK3.2的bin下运行命令:copylocale en_US zh_HK 2.在flex project下创建一个文件夹locale(与src同目录),在locale下分别创建e ...
I18n实现中英文切换
Rails I18n API框架提供了 Rails 应用国际化/本地化所需的全部必要支持,可以很容易的实现网站语言的切换. 配置I18n模块 Rails 会把 config/locales 文件夹中的 ...
前端国际化，用jquery.i18n完成中英文切换
顾名思义,用jquery.i18n首先需要引入jquery. 头部文件如下 <script src="/assets-new/plugins/jquery/jquery.min.js& ...
【ElementUI】el-table 多表格切换导致 expands 展开行仍然会保留的问题（多表格切换时的表格渲染错乱）
首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
vue项目中英文切换（多语言国际化）-- i18n插件的用法
1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...
vue elementui 切换语言
1.安装插件:npm install vue-i18n --save 2.src下新建i18n文件夹, i18n文件夹下创建langs文件夹和i18n.js文件 langs文件夹下创建cn.js; ...

vue+elementUI+vue-i18n实现中英文切换。

vue.js+vue-i18n国际化

vue.js+vue-i18n+elementUI国际化

vue+elementUI+vue-i18n实现中英文切换。相关推荐

最新文章

热门文章