這里以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: "中文是偉大的語言",
}

小技巧Tip：還可以用對象的方式加入語言內容，譬如
word:{
? ? label1: "中國必然崛起！",
? ? label2: "中文是偉大的語言",
}

在調用的時候就用$t('word.label1')、$t('word.label1')就可以了，這樣更加方便歸類同一個欄目菜單下的詞匯變量

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';//默認是中文
Object.keys(messages).includes(localStorage.language) || (localStorage.language = defaultLang);
let locale = localStorage.language;
export default { locale, messages, defaultLang };

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

// 【多國語言】----------------------------------------------------------------
import i18n from './language';//引入多語言配置文件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>
import i18n from '@/js/language';//引入多語言配置文件index.js
export default {created() {this.addEvents();},methods: {changeLanguage(curLang) {Object.keys(i18n.messages).includes(curLang) || (curLang = i18n.defaultLang);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>