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

昔不亏 等级 312 0 0

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

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 3.0 有哪些新特性值得我们提前了解
一、迎接 Vue 3.0 1\. 简介在这里插入图片描述Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 vueclipluginvuenext 提供了实验性支持 2\. 新特性重点关注: 更快更省
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注