vue 使用vue-i18n 实现多语系(国际化)

什么是i18n

vue-i18n是一款vue应用进行国际化的插件;
文档: http://kazupon.github.io/vue-i18n/

安装:

npm install vue-i18n --save

新建语系文件夹

在与page同级的位置建lang文件夹, 里面包含lang.js ,langFile文件夹;langFile文件夹里面包含了你项目的语言文件(JSON格式)
比如,cn.json :

{
"home": "首页"
}

lang.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cn from './langFile/cn.json'

//默认中文
const locale = 'cn';

const i18n = new VueI18n ({
locale,
messages
})

export default i18n;

引入:

在main.js:

import i18nfrom './lang/lang'
...
export const app = new Vue ({
el: "#app",
i18n,
template: '<App/>'
});

页面中使用:

例如, 在page/app.vue中,

<template>
<h2> {{ $t('home') }} </h2>
</template>

就可以看到下面的效果:

首页

如果想传参数, 简单,cn.json中这样写:

{
"welcome": "你好,{name}"
}

页面中这样写:

<template>
<h2> {{ $tc('welcome', {'name':'Johnny' }) }} </h2>
</template>

就可以看到下面的效果:

你好,Johnny

当然有人会问,那么怎么在js中使用?
简单, 使用下面的方式就可以获得语言文件里的内容:

this.$i18n.t('home') //首页
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值