1、下载
yarn add vue-i18n@8.26.5
2、main.js 中引入
// 引入国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = {
locale: 'zh-CN', // 语言标识
fallbackLocale: 'zh-CN', //没有英文的时候默认中文语言
silentFallbackWarn: true, //抑制警告
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
}
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')
3、创建对应的语言包js文件，文件路径自己定，但是要与main.js引入路径保持一致
./common/lang/zh // 中文语言宝文件路径
./common/lang/en // 英文语言包文件路径
en.js:
export const lang = {
test: 'English' //英文
}
export default lang
zh.js:
export const lang = {
test:'中文'
}
export default lang
4、页面使用 下载element-ui即可直接复制粘贴使用
<template>
<div class="home">
<el-dropdown>
<span class="el-dropdown-link">
{{ $t('lang.test') }}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, index) in langList" :key="index" @click.native="onChangeLangClick(item)">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
langList: [{ label:'中文', value: 0 }, { label: 'English', value: 1 }]
}
},
methods: {
onChangeLangClick(item) {
this.$i18n.locale = item.value ? 'en-US' : 'zh-CN'
}
}
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>参考网址: