下载依赖 npm install vue-i18n --save-dev
main.js配置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh',
messages: {
zh: require('./VueI18n/language-zh'),
en: require('./VueI18n/language-en')
}
})
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
创建文件夹,main.js引入
组件使用,点击切换语言 这样就完成了一个简单的国际化。language-en.js language-zh.js这两个文件是要翻译的内容,通过$t(’ ') 完成调用。
<p>{{ $t('lang.home') }}</p>
<p>{{ $t('lang.name') }}</p>
<p @click="changeLaguages">切换语言</p>
changeLaguages() {
console.log(this.$i18n.locale)
let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
this.$i18n.locale = lang
},