正文

Vue-i18n实现语言切换

IP云
IP云V管理员/5 阅读
10/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

方法1 Vue — i18n 国际化 全局配置

安 装

1.直接引入js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2.NPM安装

npm install vue-i18n

安装Yarn

yarn add vue-i18n

main.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) const i18n = new VueI18n({
//切换语言直接修改locale的值即可
//this.$i18n.locale = ..
locale: 'zh-CN',
//使用require引入中英文文件
messages:{
"EN": require('./EN.js'),
"zh-CN": require('./zh-CN.js')
}
}) new Vue({
el: '#app',
i18n,
router,
template: '<app/>',
components: {
app，
i18n
}
})

ZN.js

export const message = {
AllProduct: '全部产品',
LatestReports:"最新报道"
}

EN.js

export const message = {
AllProduct: 'ALL PRODUCT',
LatestReports: "LATEST REPORTS"
}

index.vue

<template>
<div>
{{$t('message.AllProduct')}}
</div>
</template>//全部产品

还有一种配置全局变量得方法， 不过不建议使用， 就不贴上来了！