在vue项目中快速上手vue-i18n

使用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

完。