VUE+IVIEW从无到有实践（二）

vue-i18n 国际化

1安装

npm install --save vue-i18n@5.0.3

2创建目录language

3.编辑index.js

/**
 * 引入vue-i18n
 */
import Vue from 'vue'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

/**
 * 导入iview自带语言包
 */
import zh from 'iview/dist/locale/zh-CN';
import en from 'iview/dist/locale/en-US';

/**
 * 导入APP json语言包
 */
import app_zh from './zh-CN.json'
import app_en from './en-US.json';

/**
 * 多语言配置  
 * Object.assign(zh,app_zh)  
 * zh       : iview 语言包
 * app_zh   : App json语言包
 */
Vue.locale('zh-CN',Object.assign(zh,app_zh))
Vue.locale('en-US',Object.assign(en,app_en))

// 自动设置语言
//获取本机系统语言
const navLang = navigator.language;  

const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
/**
 * localStorage.getItem(key):获取指定key本地存储的值
 * localStorage.setItem(key,value)：将value存储到key字段
 * localStorage.removeItem(key):删除指定key本地存储的值
 */
const lang = window.localStorage.getItem('language') || localLang || 'zh-CN';


//配置默认语言
//Vue.config.lang = 'zh-CN'; 默认为中文
//Vue.config.lang = 'en-US'; 默认为英文
Vue.config.lang = lang;

export default{}

4编写源码

zh-CN.json

{
    "application_card":{
        "applicat":"投保人信息",
        "insured":"被保人信息 （需18周岁以下）"
    }
}

en-US.json

{
    "application_card":{
        "applicat":"Applicant",
        "insured":"Insured (Only Child)"
    }
}

4 创建一个页面使用

<Header>
                <i-menu mode="horizontal" theme="primary" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                         <menu-item name="1">
                            <Icon type="ios-navigate"></Icon>
                            {{$t('product_menu.menu1')}}
                        </menu-item>
                        <menu-item name="2">
                            <Icon type="ios-keypad"></Icon>
                           {{$t('product_menu.menu2')}}
                        </menu-item>
                    </div>
                </i-menu>
            </Header>

                        <form-item :label="$t('applicat_formitem_label.name')" prop="name">
                            <i-input  v-model="applicat.name" prefix="ios-contact" :placeholder="$t('applicat_placeholder.name')" style="width:100%" >
                            </i-input>
                        </form-item>

添加语言只需要添加对应语言的json文件，代码里面只需要调用 $t{key}