nuxt.js使用vue-i18n实现多语言，SSR

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

一、实现步骤

1、安装vue-i18n并且创建store.js（vuex状态管理）文件

2、创建一个（middleware）中间件，用来管理不同的语言

3、创建不同语言的json文件作为语言包（例如： ~locales/en.json）

4、在pages文件夹下创建文件，并进行翻译

二、详细步骤

1、安装vue-i18n

1	npm install vue-i18n --save

2、在nuxt应用程序中引入vue-i18n

新建文件  ~plugins/i18n.js，内容如下：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'fr': require('~/locales/fr.json')
    }
  });
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  }
}

3、使用vuex保存当前语言状态

新建文件~store/index.js,内容如下：

export const state = () => ({
  locales: [‘en’, ‘fr’],
  locale: ‘en’
})
export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale
    }
  }
}

4、在middleware下新建i18n.js用来控制语言切换

/*
 * 1. sets i18n.locale and state.locale if possible
 * 2. redirects if not with locale
 */
export default function ({
  isHMR, app, store, route, params, error, redirect
}) {
  if (isHMR) { // ignore if called from hot module replacement
    return;
  } // if url does not have language, redirect to english
  else if (!params.lang) {
    return redirect('/en'+route.fullPath);
  }
  // based on directory structure _lang/xxxx, en/about has params.lang as "en"
  const locale = params.lang || 'en';
  store.commit('SET_LANG', locale); // set store
  app.i18n.locale = store.state.locale;
}

5、修改nuxt.config.js文件配置如下：

module.exports = {
  loading: { color: '#3B8070' },
  build: {               // customize webpack build
    vendor: ['vue-i18n'] // webpack vue-i18n.bundle.js
  },
  router: {              // customize nuxt.js router (vue-router).
    middleware: 'i18n'   // middleware all pages of the application
  },
  plugins: ['~/plugins/i18n.js'], // webpack plugin
  generate: {
    routes: ['/', '/about', '/fr', '/fr/about']
  }
}

6、创建本地语言包

例如：（~locales/en.js）　

{
  "links": {
    "home": "Home",
    ...
  },
  "home": {
    "title": "Welcome",
    "introduction": "This is an introduction in English."
  },
  "about": {
    "title": "About",
    "introduction": "..."
  }
}

(~locales/fr.js)

{
  "links": {
    "home": "Accueil",
    ...
  },
  "home": {
    "title": "Bienvenue",
    "introduction": "Ceci est un texte d'introduction en Français."
  },
  "about": {
    "title": "À propos",
    "introduction": "..."
  }
}

7、创建页面，并添加翻译

~pages/_lang/index.vue

~pages/_lang/about.vue

<template>
  <div class="Content">
    <div class="container">
      <h1 class="Content__Title">{{ $t('about.title') }}</h1>
      <p>{{ $t('about.introduction') }}</p>
    </div>
  </div>
</template>
<script>
export default {
  head() {
    return { title: this.$t('about.title') }
  }
}
</script>　　

 

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~