nuxt|nuxt 国际化+本地保存 nuxt国际化+本地保存

由于项目需要，在这里记录一下关于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( ) } } 里

select you language {{ $t('links.about') }}

links.about 是语言的json 文件里的字段内容。初始渲染为 app.i18n.fallbackLocale 的值。
app.i18n.fallbackLocale 在 plugins-i18n.js 里配置。
3.2，语言切换 【nuxt|nuxt 国际化+本地保存】HTML

文章图片简体中文

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 安装命令

npminstall --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 //... -> 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调用本地存储的语言