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( ) } }

<h1 class="titleFont">select you language</h1>
        {{ $t('links.about') }}

links.about 是语言的json 文件里的字段内容。初始渲染为 app.i18n.fallbackLocale 的值。
app.i18n.fallbackLocaleplugins-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调用本地存储的语言

1 篇内容引用

知道的越多,不知道的也就越多。

26 声望
4 粉丝
0 条评论
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:

A_Ghost阅读 668

Vue 中英文转换 vue-i18n 的使用
一、安装 {代码...} 二、使用在 src 下创建 lang 文件夹。1、准备语言包本例我准备了两种语言包,分别是中文和英文:zn、en。在 lang 下创建两个文件,zn.js 和 en.js。 {代码...} {代码...} 2、准备翻译的语言环...

墨城2阅读 504评论 1

Assertion failed: (thread_id_key != 0x7777)
使用npm run build时报了这个错误:Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".

来了老弟阅读 490

Nuxt3 根据路由刷新接口数据
刚用nuxt3,踩坑有点多。获取路由: {代码...} 请求数据: {代码...} 监听数据变化: {代码...} 监听路由变化: {代码...} 设置页面seo信息: 标题,关键词,描述 {代码...}

jsoncode阅读 470

nuxt作为主应用接入qiankun的实践(附代码)
nuxtjs中的路由组件&lt;nuxt/&gt;是对vue-router中&lt;router-view/&gt;的封装:(最大的坑点) {代码...} 可以看到nuxt支持配置来给路由加载过渡效果,切默认mode为out-in,但是这个动画模式会导致子应用激活时无...

不死小强阅读 436

如何理解Cookie、Session、Token?
由于许多文章更多是这三者的总结和比较,而本文主要是对Cookie、Session、Token的理解,因此并不涉及到具体的优缺点、生命周期等细节的东西

原来是小袁呐阅读 367

[登录鉴权] cookie、session和token的实现和区别
cookie、session、token都是由sever生成,保存在client端。三者最大的不同在于服务端对cookie、session、token的处理。

DiracKeeko阅读 282

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏