Vue
2020-12-04 本文已影响0人
誰在花里胡哨
效果图:
image.png安装:
npm install --save vue-i18n
image.png
文件目录:
创建一个 lang 文件夹
en.js
export default {
message:{
title:'Title'
}
}
zh.js
export default {
message:{
title:'标题'
}
}
index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhLocale from './zh'
import enLocale from './en'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh', //默认显示语言
messages: {
zh: {
...zhLocale,
},
en: {
...enLocale,
}
}
})
export default i18n
main.js中引入
使用:
<template>
<div>
<span>{{$t('message.title')}}</span>
<button @click="changeLang">切换</button>
</div>
</template>
<script>
export default {
methods: {
changeLang() {
let lang = this.$i18n.locale
this.$i18n.locale = lang == 'zh' ? 'en' : 'zh'
}
}
}
</script>
<style>
</style>