iview官网中和网上的例子中使用的都是webpack方式，需要import js文件，但是由于项目架构比较简单，没有使用webpack，纯html和js进行交互。所以这里就直接使用js文件引用方式。

1.js版本要求

iview官网中的写法，vue-i18n只支持到5.0.3版本，高一个版本会报错（Vue.locale not a function）。

Vue.use(VueI18n);

Vue.use(iView);

Vue.config.lang = 'zh-CN';

Vue.locale('zh-CN', zhLocale);

Vue.locale('en-US', enLocale);

2.iview语言文件引入

由于纯js方式引用，所以iview的语言文件需要做修改。去除export default等关键词，改为全局变量方式。

var zhLocale= {

    i: {

        locale: 'zh-CN',

        select: {

            placeholder: '请选择',

            noMatch: '无匹配数据',

            loading: '加载中'

        },

...

语言文件下载（zh-CN、en-US）：

https://files.cnblogs.com/files/xcong/lang.zip

3.代码预览

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="https://cdn.bootcss.com/iview/2.4.0/styles/iview.css" rel="stylesheet">

    <script src="../../commons/iview/lang/en-US.js"></script>

    <script src="../../commons/iview/lang/zh-CN.js"></script>

    <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>

</head>

<body>

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

<script src="https://cdn.bootcss.com/vue-i18n/5.0.3/vue-i18n.min.js"></script>

<script src="https://cdn.bootcss.com/iview/2.4.0/iview.min.js"></script>

<div id="app">

    <p>{{$t('i.page.prev')}}</p>

    切换语言：

    <i-select v-model="SelectLang" @on-change="OnSelectLang" style="width:200px">

        <i-option value="zh_CN">中文简体</i-option>

        <i-option value="en_US">English</i-option>

    </i-select>

    <page :total="100"></page>

    <br>

    <p>1.{{$t('Name')}}</p>

    <p>2.{{$t('sayHello',{name:"1"})}}</p>

</div>

<script type="text/javascript">

    var Main={

        data(){

            return{

                SelectLang:'zh-CN'

            }

        },

        methods:{

            OnSelectLang:function(){

                var lang=this.SelectLang;

                localStorage.setItem('CRMLang',lang);

                window.location.reload();

            }

        }

    }

    var selfMessageCN={

        Name:"张三",

        sayHello:"你好，{name}"

    }

    var selfMessageEN={

        Name:"zhangsan",

        sayHello:"hello,{name}"

    }

    const messages = {

        zh_CN:  $.extend({},zhLocale,selfMessageCN),

        en_US:$.extend({},enLocale,selfMessageEN),

    }

    // Create VueI18n instance with options

    // set locales

    Object.keys(messages).forEach(function (lang) {

        Vue.locale(lang, messages[lang])

    })

    Vue.config.lang = localStorage.getItem("CRMLang")||"zh_CN";var Component = Vue.extend(Main);

    new Component().$mount('#app');

    // Now the app has started!

</script>

</body>

</html>

4.效果图

iview使用vue-i18n实现国际化的更多相关文章

  1. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  2. 初识ABP vNext（6）：vue+ABP实现国际化

    Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 语言选项 语言切换 注意 最后 前言 上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在 ...

  3. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  4. ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  5. 在Vue中加入国际化（i18n）中英文功能

    1.npm安装方法 npm install vue-i18n --save 2.在src资源文件下创建文件夹i18n,i18n下面创建index.js文件,引入VueI18n和导入语言包(按开发需求可 ...

  6. struts.custom.i18n.resources国际化

    每种框价都会有国际化的支持,struts2的国际化大致上分为页面的国际化,Action的国际化以及xml的国际化 首先在struts.properties文件中加入以下内容:struts.custom ...

  7. struts.custom.i18n.resources国际化详解（一）

    每种框价都会有国际化的支持,struts2的国际化大致上分为页面的国际化,Action的国际化以及xml的国际化 首先在struts.properties文件中加入以下内容:struts.custom ...

  8. 八：Vue下的国际化处理

    p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...

  9. 基于vue项目一键国际化通用方案: vue-i18n + i18n-vue-cli(命令行工具)

    鉴于公司有做的国际化需求,对于公司的vue项目,觉得页面还是挺多的.刚开始觉得很简单,就是把vue文件中的中文,替换成变量,提取成一个文件就可以了,谁知道人肉的提取的部分确实太痛苦了,而且容易出错.最 ...

  10. Go Revel - i18n（国际化）

    ##Messages `Messages`信息是对内容提供翻译的外部文本片段.revel提供了组织每一种语言文本片段的message文件.自动区域查找.基于cookie覆盖的消息嵌套和参数. 术语表: ...

随机推荐

  1. cocos2d-x游戏引擎核心之十二——3.x新特性

    v3.0 亮点 使用 C++(C++11) 的特性取代了 Objective-C 的特性 优化了 Labels 优化了渲染器(比 v2.2 更快) 新的事件分发机制 物理引擎集成 新的 UI 对象 J ...

  2. System.Net.WebException: The operation has timed out at System.Net.HttpWebRequest.GetResponse()

    System.Net.WebException: The operation has timed out  at System.Net.HttpWebRequest.GetResponse() 在请求 ...

  3. ubuntu 14.04版本更改文件夹背景色为草绿色

    ENV:ubuntu 14.04 在这个版本上使用dconf 工具无法改变文件夹的背景了,下面介绍其他的方法,不需要dconf工具. 第一步:在home目录下创建.themes文件夹 第二步将/usr ...

  4. 单例模式与静态变量在PHP中 （转载）

    在PHP中,没有普遍意义上的静态变量.与Java.C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量. 所以,在PHP中,静态变量的存在 ...

  5. Nexus介绍

    转自:https://www.cnblogs.com/wincai/p/5599282.html 开始在使用Maven时,总是会听到nexus这个词,一会儿maven,一会儿nexus,当时很是困惑, ...

  6. 宝塔面板快速开启https服务

    最近在做小程序开发,急需要一个https的域名,首先我的域名是阿里云的,服务器是腾讯云的,操作都一样: 无论阿里云还是腾讯云,配置SSL是针对服务器的,所以首先是要去申请 腾讯/阿里云服务器的SSL( ...

  7. MUI极简的JS函数

    模块:utils http://dev.dcloud.net.cn/mui/util/#event mui.init(); mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需 ...

  8. log4j输出多个自定义日志文件(转)

    如果在实际应用中需要输出独立的日志文件,怎样才能把所需的内容从原有日志中分离,形成单独的日志文件呢? 先看一个常见的log4j.properties文件,它是在控制台和test.log文件中记录日志: ...

  9. EasyUI DataGrid 时间格式化、字符串长度截取

    需要格式化日期时间和标题的方法,显示如下: 日期:2017-03-03 时间:2017-03-0 11:11 标题:标题名称 <table id="tbList" style ...

  10. PL/SQL集合（一）：记录类型（TYPE 类型名称 IS RECORD）

    记录类型 利用记录类型可以实现复合数据类型的定义: 记录类型允许嵌套: 可以直接利用记录类型更新数据. 传统操作的问题 对于Oracle数据类型,主要使用的是VARCHAR2.NUMBER.DATE等 ...