「Vue — 插件」国际化vue-i18n

昔不亏
• 阅读 1169

1:npm install vue-i18n 2:在main.js中

import VueI18n from 'vue-i18n' //引入
Vue.use(VueI18n) //通过插件方式挂载

/*---------使用语言包-----------*/
const i18n = new VueI18n({
    locale: 'zh-CN', // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./common/lang/zh'), // 中文语言包
        'en-US': require('./common/lang/en') // 英文语言包
    }
});

new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
}).$mount('#app')

3:在src文件夹下新建common文件夹新建lang文件夹新建en.js和zh.js文件,分别存放英文和中文语言包 4:示例:en.js中

module.exports = {
    index: {
        banner: {
            title: 'RheinKoester SAP',
            detail1: 'The SAP Business Intelligence Solution provides comprehensive business intelligence capabilities, giving users the ability to make effective and informed decisions based on solid data and analysis',
            detail2: 'All users, from high-end analysts to ordinary business users, have access to the information they need, with as little reliance on IT resources and developers as possible.'
        },
        titleBox: {
            box1: {
                LTitle: "SAP products",
                MTitle: 'SAP产品'
            },
            box2: {
                LTitle: "PA Global Consultant Certification",
                MTitle: 'PA全球顾问认证'
            },
            box3: {
                LTitle: "Education and training resources",
                MTitle: '教育培训资源'
            },
            box4: {
                LTitle: "Education and training solutions",
                MTitle: '教育培训解决方案'
            }
        }
    }
}

5:示例:zh.js中

module.exports = {
    index: {
        banner: {
            title: '莱茵科斯特 SAP',
            detail1: 'SAP商务智能解决方案提供全面的商务智能功能,赋予用户根据坚实的数据和分析结果来制定有效且明智决策的能力。',
            detail2: '从高端分析师到普通业务用户的所有用户都可访问他们所需的信息,尽可能不依赖 IT 资源和开发人员。'
        },
        titleBox: {
            box1: {
                LTitle: "SAP产品",
                MTitle: 'SAP products'
            },
            box2: {
                LTitle: "PA全球顾问认证",
                MTitle: 'PA Global Consultant Certification'
            },
            box3: {
                LTitle: "教育培训资源",
                MTitle: 'Education and training resources'
            },
            box4: {
                LTitle: "教育培训解决方案",
                MTitle: 'Education and training solutions'
            }
        }
    }
}

6:使用示例

<div class="title">{{$t('index.banner.title')}}</div>
v-for="(item,index) in $t('index.threeBox')"

参考链接:https://blog.csdn.net/qq_38543537/article/details/90696648

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这