nuxt + element-ui + vue-i18n國際化，實現多語言

用Nuxt構建，實現一個英文 / 西班牙 / 中文語言的網站，配合vue-i18n去解決切換語言的問題記錄

1.安裝vue-i18n

npm install vue-i18n --save

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

export default {
  login: {
    title: "Sign In  --  en-us",
    subTitle: "英文",
  },
}

export default {
  login: {
    title: "Regístrate  --  es-es",
    subTitle: "西班牙語",
  },
}

export default {
  login: {
    title: "注冊  --  zh-cn",
    subTitle: "簡體中文",
  },
}

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>
  <div>{{subTitle}}</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 {
      subTitle: this.$t('login.subTitle'),
      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);
      loadLanguageAsync(value).then(() => {
        console.log('語言更改成功');
        this.subTitle = this.$t('login.subTitle');
      })
    },
  }
}
</script>