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>