vue项目用i18n实现多语言国际化

1.下载vue-i18n包

npm install vue-i18n --save
package.json会出现如下内容

2.main.js引入vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'zh-CN',
    messages: {
        'zh-CN': require('./common/lang/zh'),
        'en-US': require('./common/lang/en')
    }
})
new Vue({
    el: '#app',
    render: h => h(App),
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>'
})

3.创建语言目录，如下：

文件内容如下：
zh.js:

export const m = {
    Login_Name: '登录',
    Register_Name: '注册',
}

en.js:

export const m = {
    Login_Name: 'Login',
    Register_Name: 'Register',
}

4.vue组件内引入和调用方法

//Header.vue
 <router-link to="/register">/{{$t('m.Register_Name')}}</router-link> 
 <a @click="changeLangEvent">主题语言</a> 

//script
    export default {
        name:'Header',
         data(){
            return{
                  lang: 'zh-CN',//select选中的值

            }

        },
        methods: {
            //切换语言
         changeLangEvent() {
            this.$confirm('确定切换语言吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {                   
                if (this.lang === 'zh-CN' ) {
                    this.lang = 'en-US';
                    this.$i18n.locale = this.lang;//关键语句
                    this.$message({
                    message:'change success ！',
                    type: 'info',});
                }else {
                    this.lang = 'zh-CN';
                    this.$i18n.locale = this.lang;//关键语句
                    this.$message({
                    message:'切换成功！',
                    type: 'info',});
                }
                }).catch(() => {
                this.$message({
                    message:'操作取消！',
                    type: 'info',
                });          
                });

       },
     }
    }