iview使用vue-i18n实现国际化

阅读量：5788 次

发布时间：2019-06-18

本文共 904 字，大约阅读时间需要 3 分钟。

　　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）：

3.代码预览

    
         Title    
                 
         
      {
   {$t('i.page.prev')}}
    切换语言：    
              
       
        中文简体
               
       
        English
           
          
          
      
    
      1.{
   {$t('Name')}}
    
      2.{
   {$t('sayHello',{name:"1"})}}