Nuxt3项目实战篇4——Nuxt3实现中英文切换

Nuxt3的服务器端实现中英文切换。 Nuxt3+vue-i18n实现网站中英文切换。直接写这篇可能节奏快了点，如果你还不恨明白Nuxt3, 可以先考虑先跳过这一篇，因为这一篇是Nuxt3的功能实战。

首先来说一下我实现中英文的思路: 用vue-i18n实现语言的切换，同时把切换信息保存在state和cookie中(感觉localStorage可能更靠谱)。在不刷新的情况下，直接读取state中的值，如果翻页或者打开新的浏览器tab, 就获取cookie值，并存储在state中。

摆好小板凳，我们要开始起飞了：

首先安装

yarn add vue-i18n @nuxtjs/i18n
//我安装的版本
"@nuxtjs/i18n": "^7.2.2",
    "vue-i18n": "^9.1.10"

在plugins文件夹下新建locals文件夹，里面新建zn.js、en.js， 内容为

//cn.js
const cn = {
  home: {
    index: '首页'
  }
}

//en.js
const en = {
  home: {
    index: '首页'
  }
}

plugins下面新建文恶剪 i18n.js文件， 内容为

import { createI18n } from 'vue-i18n'

import en from './locales/en';
import cn from './locales/cn';

const message = {
  cn,
  en
}
//nuxt3有自带的存储和获取cookie的方式
const langages = useCookie('lang')

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  fallbackLocale: 'cn',
  locale: langages.value || 'cn', //获取cookie值，默认为cn
  warnHtmlMessage: false,
  messages: message
})

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(i18n);
})

前期准备工作都做好，现在我们进行使用

<div class="page-lang">
  <span
    :class="[userLang === 'cn' ? 'lang-curr' : '']"
    @click="setLang('cn')"
    >中文</span>
  /
  <span
    :class="[userLang === 'en' ? 'lang-curr' : '']"
    @click="setLang('en')"
    >ENGLISH</span>
</div>

// 切换语言
const { t, locale } = useI18n()
//获取cookie
const langages = useCookie('lang')
 //获取state值， composables下的文件是自动导入，不需要额外的引入
const userLang = userLangeages()

/**
 * 存储在cookie, 和本地state
 * 我皮肤的思想是： 如果没有刷新网页，直接读取本store，
 * 如果刷新，就去cookie中查找并赋值
 */
const setLang = (lan) => {
  locale.value = lan // 文字显示切换
  langages.value = lan //更新cookie
  userLang.value = lan //更新state
}

//composables文件夹下新建 languages.js文件, 
import { useState, useCookie } from "nuxt/app";
// import { useState, useCookie } from '#app' 这两种方式都可以导入useState,方法
//示例：（使用命名导出）
export const userLangeages= () => {
  const langages = useCookie('lang')
  console.log(langages)
  return useState('userLang', () => langages.value ?? 'cn')
}

上面写完，基本就已经实现了中英文切换了。

报错信息
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

如果出现这个报错，可以在项目目录下新建 vite.config.js文件，文件内容为

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
  // ...
});

项目源码参考：https://gitee.com/running-team/nuxt3-langs.git