1.远程加载翻译文件

var i18n = new VueI18n({
    locale:"zh",
    silentTranslationWarn:true,//没有的key值不发出警告
    missing(){//没有key值时应如何处理  
        return "";
    }
})


var app = new Vue({
    i18n,
    el:"#app"
})



var test = new Vue({
    i18n,
    el:"#test"
})


$.get("zh.json").done((result)=>{//json格式错误无法触发回调
     //动态设置
    i18n.setLocaleMessage('zh',result.zh);
})

HTML

<div id="app">
    <p >{{$t('name')}}</p>
</div>
<div id="test">
    <p >{{$t('name1')}}</p>
</div>

翻译文件

{
    "zh":{
        "name":"小遁"
    }
}

2动态切换语言

i18n.locale = 'en';

2 HTML用法 以及 与JS 的对应

$t

翻译文件

image.png

12 如果不被字符串包裹 则无法输出

HTML文件

    <p >{{$t('age')}}</p>
    <p >{{$t('gretting',{name:'小遁'})}}</p>
    <p >{{$t('color',['红色','绿色'])}}</p>

    <!-- 注意 v-t在使用上述远程加载时将失效 -->
    <p v-t="'age'"></p>
    <p v-t="{path:'gretting',locale:'zh',args:{name:'小遁'}}"></p>
    <p v-t="{path:'color',locale:'zh',args:['红色','绿色']}"></p>

    <p v-text="$t('age')"></p>

JS

    console.log(i18n.t('age'))
    console.log(i18n.t('gretting',{name:'小遁'}))
    console.log(i18n.t('color','zh',['红色','绿色']))

$tc

image.png image.png

JS

     console.log(i18n.tc('car',0))
    console.log(i18n.tc('apple',0))
    console.log(i18n.tc('apple',10,{count:10}))
    console.log(i18n.tc('apple',10,'zh',{count:10}))

4 DOM占位符

a

  <i18n path="term" tag="p" id="week">
        <span >{{ $t('tos') }}</a>
    </i18n>

    tos: 'Term of Service',
     term: 'I accept xxx {0}.'

输出

        <p id="week">I accept xxx <span>Term of Service </span>.</p>

image.png

b

  <i18n path="info" tag="p">
        <span place="limit">10</span>
        <a place="action" href="#">{{ $t('change') }}</a>
      </i18n>

    info: 'You can {action} until {limit} minutes from departure.',
            change: 'change your flight',
            refund: 'refund the ticket'

输出

    <p>
        You can
        <a place="action" href="#">change your flight</a> until 
        <span place="limit">10</span> minutes from departure.
    </p>

image.png

c

  <i18n path="info" tag="p" :places="{ limit: 10 }">
        <a place="action" href="#">{{ $t('refund') }}</a>
    </i18n>

输出

<p>You can <a place="action" href="#">refund the ticket</a> until 10 minutes from departure.</p>

image.png

3 链接翻译字段

image.png

4 循环输出翻译中的数组

"si_ze_yun_suan_ti-info":[
    "在计算过程和结果中,会出现小数,但被控制在有限、2位之内",
    "参于计算的数、结果、计算过程都不会出现负数",
    "按下Enter可支持单个结果的提交"
]
<p class="info" v-for="(item,index) in $t('si_ze_yun_suan_ti-info')">
    {{$t(`si_ze_yun_suan_ti-info[${index}]`)}}
   // {{$t('si_ze_yun_suan_ti-info['+index+']')}}
  </p>

如何运行GitHub上使用webpake打包的项目

第一步要确保你的电脑上有Node.js 且安装了NPM

在Github上下载好压缩包后 ，解压后进入，通常第一级就能发现package.json 这个文件

image.png

打开这个文件 找到scripts下的内容

image.png

通常dev 下是项目的案例，运行它将在本地建一个服务器，这里面的每一个命令都有价值

windows系统，在此目录下按住Shift点击鼠标右键，选择在"此处打开cmd"或"在此处打开powershell"

先输入npm install，安装项目所需要的依赖
安装完成后 以npm run 的方式运行脚本
npm run dev
npm run docs:dev
在本地建立一个API文档

image.png

感谢阅读，更多细节请阅读文档！