1.安裝vue-i18n

npm install vue-i18@7 --save   

【注意版本問題】：最開始我安裝的 最新版本的 vue-i18  就報了很多錯誤; 解除安裝重新安裝 7的版本就OK了；
 以下是我的版本："vue": "^2.6.14","element-ui": "^2.15.6", "vue-i18n": "^7.8.1",

2.新建locales檔案，en-us.js / es-es.js / zh-cn.js ,分別對應 英文 / 西班牙 / 中文 

export default {
  login: {
    title: "Sign In",
  },
}

export default {
  login: {
    title: "Regístrate",
  },
}

export default {
  login: {
    title: "註冊",
  },
}

3.新建untils資料夾,i18n-setup.js，語言轉換

import Vue from "vue"
import VueI18n from 'vue-i18n';
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n);

const i18n = new VueI18n();
const loadedLanguages = [] // 我們的預裝預設語言
const locales = ["en-us", "es-es", "zh-cn"];//所有語言
const eleLocales = {
  "en-us": "en",
  "es-es": "es",
  "zh-cn": "zh-CN"
}//對應elementUI多語言

const loadLanguageAsync = (lang) => {
  // 如果語言相同
  if (i18n.locale === lang) {
    return Promise.resolve(lang)
  }

  // 如果語言已經載入
  if (loadedLanguages.includes(lang)) {
    i18n.locale = lang
    return Promise.resolve(lang)
  }
  // 如果尚未載入語言
  return Promise.all([import(/* webpackChunkName: "lang-[request]" */ `@/locales/${lang}.js`),
  import(`element-ui/lib/locale/lang/${eleLocales[lang]}`)]).then(
    ([messages, eleMsg]) => {

      i18n.setLocaleMessage(lang, {
        ...messages.default,
        ...eleMsg.default
      })
      ElementLocale.i18n((key, value) => i18n.t(key, value))
      i18n.locale = lang
      loadedLanguages.push(lang)
      return lang
    }
  )
}

export {
  locales,
  i18n,
  loadLanguageAsync
};

4.新建plugins資料夾，i18n.js，初始化語言

import { locales, i18n, loadLanguageAsync } from "@/untils/i18n-setup"

export default async ({ app, store, params, req }) => {
  let lange = null;
  if (process.browser) {//是客戶端環境
    lange = store.state.locale || navigator.language
  } else {
    lange = store.state.locale ||
      (req && req.headers && req.headers['accept-language'] && req.headers['accept-language'].split(',')[0]);
  }
  // 初始化語言
  if (locales.indexOf(lange) === -1) {
    lange = "en-us";
  }

  await loadLanguageAsync(lange).then(() => {
    app.i18n = i18n;
  })

}

5.在nuxt.config.js新增引入

 6.index頁面

<div class="container">
  <div>{{ $t('login.title') }}</div>
  <el-select v-model="value" @change="switchLanguage(value)" class="el-select">
    <el-option
            v-for="item in language"
            :key="item.value"
            :label="item.label"
            :value="item.value">
    </el-option>
  </el-select>
</div>

<script>
import { locales, i18n, loadLanguageAsync } from "@/untils/i18n-setup"
export default {
  data() {
    return {
      value: this.$i18n.locale, //為了把下拉框的預設值和全域性變數的值一致，以此實現載入頁面時顯示的語言和資料配置一致
      language: [
        {
          value: "en-us",
          label: "英文"
        },
        {
          value: "zh-cn",
          label: "簡體中文"
        },
        {
          value: "es-es",
          label: "西班牙語"
        }
      ]
    };
  },
  methods: {
    switchLanguage(value) {
      console.log(value,this.$i18n.locale);

　　　　this.$store.commit('setLocale',value);  //vuex         this.$cookies.set('locale',value);   //  需要安裝  npm i --save cookie-universal-nuxt 代替localstorage

      loadLanguageAsync(value).then(() => {
        console.log('語言更改成功');
      })
    },
  }
}
</script>

作品來源：https://www.cnblogs.com/juewuzhe/p/15103837.html 再配合vuex  middleware  7. 新建 middleware 資料夾  新建locale.js export default function (app) { //{store,app,route,redirect,params,query,req,res}     let lang = app.$cookies.get('locale');     app.store.commit('setLocale',lang); }　　   8.store/index.js   export const state = () => ({     locale:'',  //["en-us", "es-es", "zh-cn"];  要跟 utils/i18n-setup.js相對應 })
export const mutations = {     setLocale(state, value) {         state.locale = value;         // console.log(state.locale)     }, }   9 nuxt.config.js     router:{     middleware:'locale' //在中介軟體裡面 全域性設定  每個頁面重新整理的時候都會是當前選擇的語言   }