vue+iView国际化翻译

最新推荐文章于 2024-07-11 18:03:29 发布

xrzzz

最新推荐文章于 2024-07-11 18:03:29 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： Vue iView iView国际化语言切换

本文链接：https://blog.csdn.net/kuixuemei8325/article/details/94737706

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

国际化翻译

1.安装vue-i18n库

cnpm install vue vue-i18n --save

2.新建language文件夹，先将index.js创建，并且创建zh和en两个包分别放项目中英文的json文件，再使用en-US.js和zh-CN.js将各自的分类好的语言集合起来
在这里插入图片描述

3.json文件

//英文
{
    "用户管理":"User management",
    "账号信息":	"Account Info",
    "企业认证":	"Certification"
 }
 
 //中文
 {
    "用户管理":"用户",
    "账号信息":	"账号信息",
    "企业认证":	"企业认证"
 }

4.整合语言包 en-Us.js和zh-CN.js的代码

import dataStatistics from './zh/dataStatistics.json';
import home from './zh/home.json';
const zh = Object.assign(dataStatistics,home);
export default zh;

5.index.js代码

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

Vue.use(VueI18n);
Vue.locale = () => {};

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

/**
 * 导入自己整理的 Json语言包
 */
import app_zh from './zh-CN';
import app_en from './en-US';

/**
 * 多语言配置  
 * 整合iview和自己整理的语言包
//  */
const messages = {
    en: Object.assign(app_en, en),
    zh: Object.assign(app_zh, zh)
};

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

const localLang = navLang === 'zh' || navLang === 'en' ? navLang : false;

const lang = window.localStorage.getItem('language') || localLang || 'zh';

//导出
export default new VueI18n({
    locale: lang,  // set locale
    messages  // set locale messages
});

6.在main.js里倒入语言包

import iView from 'iview'
import i18n from "./language" //整理好的国际化语言包

Vue.use(iView,{
    i18n:(key,value)=>i18n.t(key,value), //记得添加，不然在会导致组件报错
});

//挂载在vue上
new Vue({
	el: '#app',
    i18n,
	components: {
		App
	},
	template: '<App/>'
})

在界面中使用

//在html中
<label class="left-title" for="appPublickKey">{{$t('嘻嘻嘻)}}</label>

//在js中
this.$t('嘻嘻')；

//如果使用了iview框架的弹出框，弹出框里的组件拿不到$t的属性，所以需要将该方法传给子级
//父级点击弹出框
this.$Modal.confirm({
    render: h => {
        return h(keyModel, {
            props: {
                title: 'App Secret',
                content: val,
                $t:_this.$t    //一定要传
            },
        })
    }
})

//子级接受该属性，然后就可以正常使用了
      props: {
            $t:{
                type:Function
            }
        },