Vue-i18n实现语言切换
2024-08-26 04:09:17
方法1 Vue — i18n 国际化 全局配置
安 装
1.直接引入js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
2.NPM安装
npm install vue-i18n
安装Yarn
yarn add vue-i18n
main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) const i18n = new VueI18n({
//切换语言直接修改locale的值即可
//this.$i18n.locale = ..
locale: 'zh-CN',
//使用require引入中英文文件
messages:{
"EN": require('./EN.js'),
"zh-CN": require('./zh-CN.js')
}
}) new Vue({
el: '#app',
i18n,
router,
template: '<app/>',
components: {
app,
i18n
}
})
ZN.js
export const message = {
AllProduct: '全部产品',
LatestReports:"最新报道"
}
EN.js
export const message = {
AllProduct: 'ALL PRODUCT',
LatestReports: "LATEST REPORTS"
}
index.vue
<template>
<div>
{{$t('message.AllProduct')}}
</div>
</template> //全部产品
还有一种配置全局变量得方法, 不过不建议使用, 就不贴上来了!
最新文章
- longjmp setjmp and volatile
- 常见sizeof 笔试题
- shell script的连接符是逗号,不是英文的句号
- div 滚动定位代码
- MongoDB开发应用实战
- webpack下css/js/html引用图片的正确方式
- 软件工程作业-(third)
- 2017-2018-2 20165234 实验四《Android程序设计》实验报告
- activiti5/6 系列之--流程复用技术 callActivity
- Java版 人脸识别SDK dem
- Scala的内建控制结构
- #pragma alloc_text
- SpringBoot开发案例之整合Kafka实现消息队列
- 【mybase】绿色版---mybase非常好用的笔记软件
- Video如何不自动全屏播放?
- Python笔记 #09# Basic plots with matplotlib
- Socket 编程(二)
- 跟踪Makefile输出调试信息
- js作用域对象与运用技巧
- JS跳转页面的几种方法
热门文章
- 【Lucene】具体解释Lucene全文检索的信息写入与读取
- 使用RTL-SDR,从打开一个车门到批量打开车门
- VisualSVN Server 导入已存在的库
- Python机器学习--回归
- android 获取屏幕宽高 和 获取控件坐标
- 阿里云serverMySQL无法连接问题解决纪实
- python基础小练习
- Vim经常使用技巧总结2
- openwrt gstreamer实例学习笔记(七. gstreamer 缓冲区(Buffers)和事件(Events))
- Codeforces Round #420 (Div. 2) E. Okabe and El Psy Kongroo DP+矩阵快速幂加速