VUE项目配置国际化

在项目中往往会有中英文切换,这时候我们会用到国际化。

1.安装

npm install -g vue-i18n

2.新建目录lang文件,分别建立en.js和zh.js文件。
（1）英文配置

// en.js
const zh ={
    commons: {
        admin: 'Admin',
        editor: 'Editor',
        quit: 'Sign Out',
        hi: 'Hi',
        fundManage: 'Money',
        fundList: 'MoneyList',
        chinaTabsList: 'AreaList',
        fundData: 'FundData',
        fundPosition: 'FundPosition',
        typePosition: 'TypePosition',
        incomePayPosition: 'IncomePayPosition',
        permission: 'Permission',
        pagePer: 'PagePermission',
        directivePer: 'DirectivePermission',
        errorPage: 'ErrorPage',
        page401:'401',
        page404:'404',
        wechatNumber: 'wechat'
    }
}
export default zh;

（1）中文配置 

// zh.js

const zh = {
    // layout
    commons: {
        admin: '管理员',
        editor: '瑞吉',
        quit: '退出',
        hi: '您好',
        index: '首页',
        userManage: '用户管理',
        share: '分享功能',
        infoManage: '信息管理',
        fundManage: '资金管理',
        fundList: '资金流水',
        chinaTabsList: '区域投资',
        fundData: '资金数据',
        fundPosition: '投资分布',
        typePosition: '项目分布',
        incomePayPosition: '收支分布',
        permission: '权限设置',
        pagePer: '页面权限',
        directivePer: '按钮权限',
        errorPage: '错误页面',
        page401:'401',
        page404:'404',
        wechatNumber: '微信号'
    }
}

export default zh;

3.在lang下创建index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import enLocale from './en'
import zhLocale from './zh'

process.env.NODE_ENV === "development" ? Vue.use(VueI18n) : null;

const i18nList = {
    local:'en',
    messages: {
        zh:{
            ...zhLocale
        },
        en:{
            ...enLocale
        }
    }
}

const i18n = new VueI18n(i18nList)

export default i18n;

4.引入到main.js
 

import i18n from './lang/index';

new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

5.项目中使用
 

<span>{{ $t('commons.admin')}}</span>