Vuei18n 实际应用不使用打包工具篇！

2022-05-31 20:39:36

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>
复制代码

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

$tc

     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

如何运行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

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

原文发布时间为：2018年07月02日

原文作者：掘金

本文来源：掘金如需转载请联系原作者

码农公寓

1.远程加载翻译文件

2动态切换语言

2 HTML用法 以及 与JS 的对应

$t

$tc

4 DOM占位符

a

b

c

3 链接翻译字段

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

相关文章

2 HTML用法以及与JS 的对应