安装: 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实现中英文切换。相关推荐

  1. vue2项目使用i18n进行中英文切换

    vue+element 使用i18n进行中英文切换 文章目录 前言 一.下载vue-i18n插件 二.定义中英文两套js文件,配置i18n,并在main.js中引入 三.通过点击事件切换语言 四.i1 ...

  2. vue中如何实现实现中英文切换

    一.安装 vue-i18n插件 npm i vue-i18n 二.main.js文件的配置 import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件 ...

  3. windows下安装python的i18n_python国际化(i18n)和中英文切换

    [1.到Flex SDK3.2的bin下运行命令:copylocale en_US zh_HK 2.在flex project下创建一个文件夹locale(与src同目录),在locale下分别创建e ...

  4. I18n实现中英文切换

    Rails I18n API框架提供了 Rails 应用国际化/本地化所需的全部必要支持,可以很容易的实现网站语言的切换. 配置I18n模块 Rails 会把 config/locales 文件夹中的 ...

  5. 前端国际化,用jquery.i18n完成中英文切换

    顾名思义,用jquery.i18n首先需要引入jquery. 头部文件如下 <script src="/assets-new/plugins/jquery/jquery.min.js& ...

  6. 【ElementUI】el-table 多表格切换 导致 expands 展开行仍然会保留的问题(多表格切换时的表格渲染错乱)

    首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...

  7. vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程

    公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...

  8. vue项目中英文切换(多语言国际化)-- i18n插件的用法

    1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...

  9. vue elementui 切换语言

    1.安装插件:npm install vue-i18n  --save 2.src下新建i18n文件夹, i18n文件夹下创建langs文件夹和i18n.js文件 langs文件夹下创建cn.js; ...

最新文章

  1. AIX存储管理(二)物理卷管理
  2. Container.ItemIndex 获取reapeater行号
  3. 各银行汇款手续费之比较
  4. 16产品经理需要具备的做事能力
  5. 图像超分辨率(Super-Resolution)技术研究
  6. Tensorflow结点打包和依赖控制
  7. Unity Manual learning log
  8. oracle连表图解,oracle 表连接方式解析
  9. (三)洞悉linux下的Netfilteriptables:内核中的rule,match和target
  10. centos6.8中zabbix3.0.X的部署
  11. tf 单个文字识别 data 数据输入
  12. Doris export任务概率性cancelled
  13. css3-pie,CSS3pie是什么?
  14. 使用HttpClient登录知乎获取返回页面信息
  15. 批量启动docer容器shell脚本
  16. Jstack查询线程堆栈
  17. 丘成桐大学生数学竞赛2014年分析与方程个人赛试题第一题另解
  18. windows bat 批量修改文件名。不改变后缀
  19. Dojo JQuery
  20. 西门子s7-200解密软件下载_西门子强势推出S71200主打优势是什么,卖点如何?

热门文章

  1. 大学学计算机7代i5够吗,学生党必看:最新的7代酷睿与Core i5相比该选谁?
  2. JDBC 基础、CRUD、分页 第一节
  3. 用Python编写账号密码登录程序
  4. 基于FPGA驱动DAC6004
  5. ABB机器人6.13版手册下载
  6. UBC 计算机专业 要求 英语 A,赴加拿大留学语言成绩的要求
  7. 计算机恢复桌面,电脑桌面及桌面图标消失不见怎么找回?
  8. 非静态成员必须与特定对象相对
  9. [XCode] XCode 6 中修改模拟器版本
  10. 腾讯区块链强势出击,公链的机会在哪里?