这里以Vue2为例子

第一步：安装vue-i18n

npm install vue-i18n@8.26.5

第二步：在src下创建js文件夹，继续创建language文件夹

在language文件夹里面创建zh.js、en.js、index.js这仨文件

这仨文件代码分别如下：

zh.js

export default {
    word1: "中国必然崛起！",
    word2: "中文是伟大的语言",
}

en.js

export default {
    word1: "China is NB！",
    word2: "Chinese is great language",
}

 index.js

import Vue from 'vue'; import VueI18n from 'vue-i18n';//npm install vue-i18n@8.26.5
Vue.use(VueI18n);
//引入国际化变量文件
import zh from './zh';//中文
import en from './en';//英语
// ...可以按照上面的方式，继续添加其他语言
let messages = { zh, en, };
let defaultLang = 'zh';//默认是中文
let locale = localStorage.language || defaultLang;
export default { locale, messages, };

第三步：在main.js文件里面引入i18n

// 【多国语言】----------------------------------------------------------------
import i18n from './language/index';//引入多语言配置文件index.js

//【初始化加载】----------------------------------------------------------------
import App from '../vue/App';
new Vue({
    el: '#app',
    render: h => h(App),
    router,
    store: vuex,
    i18n, //把i18n挂载在全局上
});

第四步：应用文件

<template>
    <div>

        <h1>{{ $t('word1') }}</h1>
        <h2>{{ $t('word2') }}</h2>

        <hr>

        <el-button @click="changeLanguage('zh')" v-if="this.$i18n.locale !== 'zh'" type="success">中文</el-button>
        <el-button @click="changeLanguage('en')" v-if="this.$i18n.locale !== 'en'" type="danger">英文</el-button>

    </div>
</template>
    
<script>
export default {
    created() {
        this.addEvents();
    },
    methods: {
        changeLanguage(curLang) {
            this.$i18n.locale = curLang;
            localStorage.language = curLang;
        },
        addEvents(d) {
            this.removeEvents();
            addEventListener('storage', this.storage);
        },
        removeEvents(d) {
            removeEventListener('storage', this.storage);
        },
        storage(e) {
            e.key === 'language' && this.changeLanguage(e.newValue);// 监听手工修改localStorage.language;
        },
    }
};
</script>