什么是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') //首页
Logo

前往低代码交流专区

更多推荐