杰网资源 Design By www.escxy.com
vue中使用 vue-i18n 兼容多国语言
1.安装：npm install vue-i18n --save-dev
2.在main.js文件中引入：
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({
locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': require('./VueI18n/language-zh'), //
'en': require('./VueI18n/language-en')
}
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
3.在src下新建文件夹VueI18n（文件名字可自己定） 然后在文件夹下建立两个文件language-zh.js和language-en.js
你也可以创建的是两个json文件 如language-zh.json但是里面的格式也改成json格式
json 格式：
{
"lang":{
"home": "HHHHHHHHome",
"name": 'Chinese'
}
}
在main.js中引入这两个文件
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({
locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': require('./VueI18n/language-zh'), //引入language-zh.js language-en,js
'en': require('./VueI18n/language-en')
}
})
language-zh.js
language-en.js
4.在组件中开始使用
<template>
<div class="content">
<span>{{ $t('lang.home')}}</span>
<span>{{ $t('lang.name')}}</span>
<span @click="changeLaguages()">切换语言</span>
<!-- <span v-if="lang==='zh'" @click="changezh" style="display:block" class="color">中文</span> -->
<!-- <span v-else ="lang==='en'" @click="changeen" style="display:block">english</span> -->
</div>
</template>
<script>
export default {
data () {
return {
lang: 'zh'
}
},
methods: {
changeLaguages () {
console.log(this.$i18n.locale)
let lang = this.$i18n.locale === 'zh' "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/scss/index.scss';
</style>
点击切换语言 这样就完成了一个简单的国际化。language-en.js language-zh.js这两个文件是要翻译的内容，通过$t(' ') 完成调用。
Ps:亲测可用，只为备忘，仅供参考
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
vue,i18n,多国语言,兼容
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？