一、实现步骤
1、安装vue-i18n并且创建store.js(vuex状态管理)文件
2、创建一个(middleware)中间件,用来管理不同的语言
3、创建不同语言的json文件作为语言包(例如: ~locales/en.json)
4、在pages文件夹下创建文件,并进行翻译
二、详细步骤
1、安装vue-i18n
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>