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