Vue多语⾔vue-il8n的使⽤安装
npm install vue-i18n --save
配置使⽤
建⽴lang⽂件夹，分别建⽴index.js，zh.js，en.js⽂件，然后在项⽬的⼊⼝⽂件main.js中引⼊index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
const messages = {
en: {
.
..enLocale
},
zh: {
...zhLocale
}
}
const i18n = new VueI18n({
locale: 'zh',
messages
})
export default i18n
zh.js
export default {
message: {
test: '你好世界'
}
}
en.js
export default {
message: {
test: 'hello world'
}
}
main.js
import i18n from './assets/lang'
new Vue({
el: '#app',
router,
i18n, //引⼊i18n
components: { App },
template: '<App/>'
})
页⾯中使⽤
<template>
<el-card class="box-card">
<div slot="header">
<span>选择语⾔</span>
<el-radio-group @change="handleChange" v-model="lang" >        <el-radio label="zh">中⽂</el-radio>
<el-radio label="en">英⽂</el-radio>
</el-radio-group>
</div>
<div>{{$t('st')}}</div>
</el-card>
</template>htmlradio多选怎么用
<script>
export default {
name: 'i18n',
data () {
return {
lang: 'zh'
}
},
methods: {
handleChange () {
this.$i18n.locale = this.lang
}
}
}
</script>
<style scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。