标签：script rop alt slot 语音 als 实现 imp ota
由于项目需求需要配置国际化,使用的UI框架为iview, vue国际化使用的是vue-i18n组件，按照官方要求下载 vue-i18n(8.14.0),版本大于6.0 按照官方提供的6.0配置方案解决。
第一步：需要先进行安装
npm install vue-i18n
第二步: 创建一个新的目录 language 目录, 在该目录下创建 index.js、en-US.json、zh-CN.json。
index.js 配置i18n: 按照官方文档引入需要的包，然后配置 (全是按照官方文档一步一步走)这里直接上代码
import Vue from ‘vue‘; import iView from ‘iview‘;//也可以import iView from ‘view-designer‘; import VueI18n from ‘vue-i18n‘; import en from ‘iview/dist/locale/en-US‘; import zh from ‘iview/dist/locale/zh-CN‘; import US from ‘./en-US‘; import CN from ‘./zh-CN‘ Vue.use(VueI18n); Vue.locale = () => {}; const messages = { en: Object.assign(US, en), //将自己的英文包和iview提供的结合 zh: Object.assign(CN, zh) //将自己的中文包和iview提供的结合 }; const i18n = new VueI18n({ locale:window.localStorage.getItem(‘language‘)===null?‘zh‘:window.localStorage.getItem(‘language‘), // 语言标识，设置默认语言 messages // set locale messages }); Vue.use(iView, { i18n: (key, value) => i18n.t(key, value) }) //上面这个比较重要 按照官网提供的方法 new Vue({ i18n }).$mount(‘#app‘); 运行会出错 提示无法找到 _t 属性。 按照上述方法配置可以解决此问题(网上找的方法,亲测没问题) //将i18n 导出，在main.js 的 new Vue({}) 中需要配置 export default i18n
main.js 中只需要导入该文件,就可以正常使用了
import i18n from ‘./language‘ new Vue({ el: ‘#app‘, router, i18n, //不配置会不生效的 components: { App }, template: ‘<App/>‘ })
en-US.json 配置英文翻译 这个应该很简单 我随便举了几个例子
{
"hello" : "Hello",
"welcome": "Welcome"
}
zh-CN.json 配置中文翻译 这个也一样
{
"hello" : "你好",
"welcome": "欢迎光临"
}
在vue文件中使用方法：
<template>
<div class="containt">
<!--在标签中直接添加元素{{$t(‘home‘)}}-->
{{ $t(‘welcome‘) }}
</div>
<!--在placehold等标签属性中使用-->
<div :placeholder="$t(‘home‘)">
</div>
<!--在js方法中使用-->
<!--alert( this.$t(‘home‘) )-->
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
.containt{
height: 100%;
width: 100%;
background-color: #15162C;
color: #fff;
}
</style>
结果:
后面就是切换语音：使用的是iview的Dropdown下拉菜单click点击
<Dropdown>
<span>
语言
<Icon type="ios-arrow-down"></Icon>
</span>
<DropdownMenu slot="list">
<DropdownItem @click.native="changeLanguage(‘zh‘)">
中文
</DropdownItem>
<DropdownItem @click.native="changeLanguage(‘en‘)">
英文
</DropdownMenu>
</Dropdown>
下面的切换语言的函数放在index.vue首页里面：
// 切换语言 changeLanguage(language) { if (language == "zh") { this.language = "en-US"; this.$i18n.locale = this.language; //关键语句 this.addCookie("lang", this.language); } else { this.language = "en"; this.$i18n.locale = this.language; //关键语句 this.addCookie("lang", this.language); } location.reload(); },
本文转自：https://www.cnblogs.com/webtaotao/p/11381636.html
标签：script rop alt slot 语音 als 实现 imp ota
原文地址：https://www.cnblogs.com/nizuimeiabc1/p/12173602.html
