1.安装i18n npm install vue-i18n -S
2.在src目录下创建一个lang文件夹,内建三个文件:index.js en_us.js zh_cn.js
en_us.js代码如下:
export default {
app: {
hello: 'Hello,World'
}
}
zh_cn.js代码如下:
export default {
app: {
hello: '你好,世界!'
}
}
index.js代码如下:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {Locale} from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enLocale from './en_us'
import zhLocale from './zh_cn'
Vue.use(VueI18n)
const messages = {
en: {
...enUS,
...enLocale
},
zh: {
...zhCN,
...zhLocale
}
}
const i18n = new VueI18n({
locale: 'zh', // 设置默认语言
messages: messages // 设置资源文件对象
})
// 更新vant组件库本身的语言变化,支持国际化
function vantLocales (lang) {
if (lang === 'en') {
Locale.use(lang, enUS)
} else if (lang === 'zh') {
Locale.use(lang, zhCN)
}
}
export {i18n, vantLocales}
3.修改src/main.js文件内容:
import {i18n, vantLocales} from './lang'
vantLocales(i18n.locale)
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app');
4.使用:
<template>
<div>语言设置
<van-nav-bar :title="this.$t('app.hello')" @click-left="show=true">
<van-icon name="search" slot="left" />
</van-nav-bar>
<button @click="changeLang">切换语言</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods:{
changeLang(){
this.$i18n.locale == 'en'? this.$i18n.locale = 'zh':this.$i18n.locale = 'en'
}
}
};
</script>
5.用你的左手的手心,大力的和右手的手心接触。