使用i18n

1、安装

npm install vue-i18n / npm install vue-i18n --save / npm install [email protected]

2、在main.js中引入（引入有很多写法，此处暂时记录我使用的一种）

此处import的文件是自己在src下创建的,注意自己的路径不要写错了

import i18n from './i18n/i18n'// 国际化封装

new Vue({

  store,

  router,

  i18n, 

  render: h => h(App)

}).$mount('#app')

3、编写i18n文件

在src下创建i18n文件夹，再创建子文件夹lang和子文件i18n.js

src目录下创建i18n文件夹

i18n文件详解

1、配置文件

文件源码放在了文章末尾噢

i18n配置文件

2、入口文件

在lang下创建两个文件夹，一个是cn，一个是en，分别用来存放中文和英文js文件。

当然，你还可以继续在cn下创文件夹，方便管理。

cn和en下都有一个index.js文件,也就是入口文件，两者内容中的取名要保持一致，引入的文件里面的数据也要相对应

3、基本文件

基本文件也是一一对应的，比如入口文件引入的labels: require('./labels.js'),

中文文件

英文文件

4、使用方法

this.$t('labels.rememberMe');

这样就完成啦，不同模块可以有重名噢，也就是说以下两种是不同的

this.$t('labels.rememberMe');

this.$t('buttons.rememberMe');

源码

i18n配置文件

/* eslint-disable */

import Vue from 'vue'

import VueI18n from 'vue-i18n'

import locale from 'element-ui/lib/locale';//elementUI的国际化

import cn from './langs/cn/index'

import en from './langs/en/index'

import enLocale from 'element-ui/lib/locale/lang/en'

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {

  en: Object.assign(en, enLocale),// 使用ES6展开挂载自定义中英文和element UI中英文

  zh: Object.assign(cn, zhLocale)

}

const i18n = new VueI18n({

  locale: localStorage.lang || 'zh',// 语言标识

  messages, // 挂载

  silentTranslationWarn: true, //控制台屏蔽讲警告

})

locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n