vue 使用vue-i18n 实现多语系（国际化）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013338742/article/details/79659131

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