nuxt.js实战之用vue-i18n实现多语言

npm install vue-i18n --save

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}`;
}
}

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

/*
* 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;
}

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']
}
}

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

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

<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>