使用NPM下载
npm install vue-i18n
或者使用yarn下载
yarn add vue-i18n
在你的vue项目main.js文件中引入并使用
import Vue from 'vue'
import VueI18n from 'vue-i18n' // 引入vue-i18n
Vue.use(VueI18n) // 通过Vue.use方法使用
// 创建一个i18n实例
const i18n = new VueI18n({
locale: 'zh', // 当前选择的语言
messages: {
zh: require('./language/zh.js'), // 引入对应的语言包
en: require('./language/en.js') // 引入对应的语言包
}
})
new Vue({
router,
i18n, // 记得挂载到vue上
render: h => h(App),
}).$mount('#app')
在语言包文件language/zh.js和language/en.js中定义数据
// language/zh.js 文件中定义
module.exports = {
index: {
img: '图片',
test: '测试'
}
}
// language/en.js 文件中定义
module.exports = {
index: {
img: 'img',
test: 'test'
}
}
在组件中使用的话,要通过vue-i18n的模板语法$t(),示例:
<template>
<div>
<p>{{ $t('index.img') }}</p>
<p>{{ $t('index.test') }}</p>
</div>
</template>
页面效果如下:
可以通过vue-i18n提供的全局变量locale切换语言,示例:
<template>
<div>
<p>{{ $t('index.img') }}</p>
<p>{{ $t('index.test') }}</p>
<button @click="switchZh('zh')">切换中文</button>
<button @click="switchZh('en')">切换英文</button>
</div>
</template>
<script>
export default {
methods: {
switchZh(val){
this.$i18n.locale = val; // 切换语言
}
}
}
</script>
以上示例就可以实现多语言功能了,官方文档还提供了其他场景的处理方法开始 | Vue I18n
完。