安装: 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. (原創) 我的Design Pattern之旅[3]:使用template改進Strategy Pattern (OO) (Design Pattern) (C/C++) (template)...
  2. mysql 缓存怎么设置_mysql中缓存如何设置
  3. OpenCASCADE:Modeling Data之3D几何
  4. 跨平台APP JQuery Mobile开发-张晨光-专题视频课程
  5. 【转】Win10系统创建WiFi热点的两种方法
  6. 对于销售,什么是你应该考虑的最重要事情?
  7. 如何判断国际会议是否被EI收录
  8. 图片验证码+输入立即校验
  9. 单片机 驱动 标签打印机tsc_指令打印与驱动打印随笔
  10. PWM级联方案。UART接口的单总线控制多个PWM输出。数字舵机,舵机级联方案
  11. verilog设计一个补码加减法运算器_一文搞懂:计算机中为什么用补码来存储数据?...
  12. c#Winform程序CPU占用高的原因和解决方法(转载)
  13. python:numpy.random.shuffle打乱顺序函数
  14. VS+Qt 如何设置软件版本版权,获取软件版本并显示版本号?
  15. html如何使文本自动换行,html 文本自动换行
  16. 安装虚拟机提示未启动服务器,Hyper-V虚拟机未启动,并触发0x80070057错误
  17. 使用Word脚注、尾注给论文添加参考文献并将编号修改成[1]的方法
  18. 51单片机学习随笔(1)
  19. 中国地质大学计算机研究所宿舍,在地大,据说一些寝室闪闪发光
  20. XML的两种常见格式

热门文章

  1. 在职研究生(多重继承)
  2. Bi-Direction attention flow for machine reading(原理篇)
  3. MUSCI算法估计空间方位角
  4. 中国人工智能发展主要存在哪些制约因素,有哪些好的建议
  5. 红楼梦人物出场顺序python_Python 中文词频分析——红楼梦人物出场次数
  6. Win10删除文件夹
  7. 数据结构与算法38-鸭棋
  8. WPS广告投放的优势!WPS广告投放的展现形式!
  9. Web性能测试工具大全
  10. 我是实小楼,万万没想到,强化学习帮我走出了迷宫