vue.js实现多语言_vue.js国际化 vue-i18n插件的使用

时间: 2018-03-14阅读: 2798标签: 语言

目的

在项目开发中遇到需要多语言的支持,需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示。

发现vue项目中有对应的组件vue-i18n,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码


安装方法

1.使用CDN直接引用

<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

3.Yarn

$ yarn add vue-i18n


使用方法

在这里只介绍vue的使用方法

import vueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    local: 'cn', // 设置语言
    messages // 语言包
})

new Vue({
    el: '#app',
    ...
    i18n
})
// messages 大概的使用格式
{
    cn: {
        name: '名字'
    },
    us: {
        name: 'Name'
    }
}

使用i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

还有一些其他的用法,如:

  • 针对不同语言,显示不同的格式
  • 如果在传入自定义变量来控制显示
  • ... 具体的请参考官方文档

切换语言的话,可以使用内置变量:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us


语言包的生成 & 替换项目中原有的静态文本

这一步最关键,抽离出所有出现的汉字,替换成$t('xxx'),维护多个版本的语言文件

语言包这边是这么处理的,项目下新增一个目录languages

--languages
    --lib
        -- cn.js // 中文语言包
        -- us.js // 英文语言包
        -- .. // 其他语言,暂未实践
    -- index.js // 导出语言包

cn.js

export default {
    common: {
        message: '消息'
    },
    xxx: {

    }
}

us.js

export default {
    common: {
        message: 'Messages'
    },
    xxx: {

    }
}

index.js

import cn from './lib/cn.js'

export default {
    cn,
    us
}

替换文本

<template>
    ...
    <div>{{$t('message')}}</div>
    ...
</template>

问题

  • 不同的语言,格式不同,长度不同,可能需要调整项目的样式,以保正常
  • 对于一个已经在使用的项目,生成语言包这一步工作量大,浪费时间
  • 没有考虑如果是否需要动态的加载语言包,而非初始的加载所有的语言包


链接:https://juejin.im/post/5aa7e18ff265da2384404334

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/507

web网页多语言的实现方案_前端实现多语言切换

需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示。在用户点击切换语言后,把选择的语言版本保存在cookie中;定义语言的标识+内容的json字符串

五款面向未来的伟大编程语言

我们根据 RedMonk 与 TIOBE 等公司发布的数据,大胆宣称一部分编程语言在未来中长期内将注定步入失败。这篇文章发布之后引发轩然大波,这也让我们深刻进行了自省,并决定……写下这篇更为激进的续章

学习你的第一门编程语言

好的,决定好想学什么编程语言了吗,现在就让我们开始学习吧。所有你需要做的就是打开一本书,然后开始阅读,是这样的吗?

Hello World各类编程语言写法

Hello World程序指的是指在计算机屏幕上输出Hello, World!(意为「世界,你好!」)这行字符串的计算机程序。一般来说,这是每一种计算机编程语言中最基本、最简单的程序,亦通常是初学者所编写的第一个程序

javascript是弱类型语言吗?

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

WebAssembly的过去、现在和未来

为了能够让其他语言的代码在浏览器中运行,WebAssembly被创造出来。它拥有更好性能,更小的size,能够更快的加载和执行。我们无需编写WebAssembly的代码,只需要将其他高级语言编译成WebAssembly,这样就能在浏览器中复用大量的其他语言现有的代码。

javascript是高级语言吗?

javascript是高级语言,与C系列以及java类的高级语言的区别是强弱类型之分,javascript是一门弱类型语言。计算机语言的种类非常的多,总的来说可以分成机器语言,汇编语言,高级语言三大类。

10个编译为JavaScript的语言

你不用写一行Javascript或者考虑这种语言的局限,就能生产在浏览器能运行的代码。这篇文章包括了十种有趣的语言能够编译为Javascript,在浏览器或者Node.js中被执行

奇怪的 Javascript

我的意思是,对于刚开始使用这种语言和他语言(例如 C++ 或 C#)的开发人员来说,javascript 可能会很奇怪。某些语言可能会让你大吃一惊

不同语言在函数内部定义函数

在 LeetCode 刷题的时候,题解有的大佬给出的答案很优秀,是 python 的,想抄作业发现有的功能函数都定义在答案函数的内部,主要是闭包操作外部变量方便。不同语言在函数内部定义函数稍有不同

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广