共计 2828 个字符,预计需要花费 8 分钟才能阅读完成。
因为我的项目须要,在这里记录一下对于 nuxt 国际化应用,并增加 刷新页面语言不重置性能。
参考 nuxt 官网提供的国际化利用:nuxt 官网参考代码
1,文件构造
|--locales ------ 寄存不同语言的 json 文件。|--en.json
|--fr.json
|--middleware ------nuxt 的中间件,解决路由
|--i18n.js
|--pages ------ 具体页面,国际化的页面须要在_lang 下,例如:pages/en/about
|--_lang
|--about.vue
|--plugins ------ 实现语言切换的中央。|--i18n.js
|--store ------ 应用 vuex 存储。|--i18n.jsjs
|--nuxt.config.js ------ 国际化相干配置
2,装置
npm install vue-i18n --save
3,应用
3.1 调用,初始渲染
国际化的内容要蕴含在 {{ $t() } } 里
<h1 class="titleFont">select you language</h1>
{{$t('links.about') }}
links.about 是语言的 json 文件里的字段内容。初始渲染为 app.i18n.fallbackLocale 的值。
app.i18n.fallbackLocale 在 plugins-i18n.js 里配置。
3.2,语言切换
HTML
<div class="languageInfo" @click="changeLanguage('zh')">
<img src="../assets/img/language/China.png" alt=""width="35px"height="35px">
<span class="languageFont"> 简体中文 </span>
</div>
js
changeLanguage(language){
this.$i18n.locale = language;
Cookies.set('lang', language);
}
具体实现切换的办法是,this.$i18n.locale = language;
通过 cookie 保留 已抉择的语言。因为,在切换语言,并手动刷新页面之后,语言会重置为默认值。无奈记录以后抉择的语言。所以要进行本地保留。
不应用 localStorage 的起因是,在 plugins—i18n.js 里调用 localStorage.getItem() 时会呈现 ‘localStorage’ is not defined 的问题。
在 SSR 中,created 生命周期在服务端执行,node 环境中没有 localStorage 所以会报错,将须要应用 localStorage 的代码放到浏览器应用的生命周期 (mounted) 中。
3.3 调用本地存储的语言
// plugins---i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
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: Cookies.get('lang') || store.state.locale,
fallbackLocale: 'en',
messages: {en: require('../locales/en.json'),
fr: require('../locales/fr.json'),
zh: require('../locales/zh.json'),
}
})
app.i18n.path = (link) => {if (app.i18n.locale === app.i18n.fallbackLocale) {return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}
至此,国际化的切换,保留的基本功能曾经全副实现了。
相干补充
1,js-cookie 的 npm 装置命令
npm install --save js-cookie
2,各文件具体代码。
这些在官网上都有,这里粘进去,也不便大家查看。
store-index.js
//store-index.js
export const state = () => ({locales: ['en', 'fr','zh'],
locale: 'fr'
})
export const mutations = {
// 此处为设置 locale
SET_LANG(state, locale) {if (state.locales.includes(locale)) {state.locale = locale}
}
}
nuxt.config.js
plugins: ['~/plugins/i18n'],
router: {middleware: ['i18n']
},
middleware—i18n.js
export default function ({isHMR, app, store, route, params, error, redirect}) {
const defaultLocale = app.i18n.fallbackLocale
// If middleware is called from hot module replacement, ignore it
if (isHMR) {return}
// Get locale from params
const locale = params.lang || defaultLocale
if (!store.state.locales.includes(locale)) {return error({ message: 'This page could not be found.', statusCode: 404})
}
// Set locale
store.commit('SET_LANG', locale)
app.i18n.locale = store.state.locale
// If route is /<defaultLocale>/... -> redirect to /...
if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
const re = new RegExp(toReplace)
return redirect(route.fullPath.replace(re, '/')
)
}
}
plugins—i18n.js
见 上文 3.3 调用本地存储的语言
正文完