devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Nuxt3+Ant-design-vue国际化,自定义主题_nuxt3国际化

作者：小桥流水78 | 2024-07-12 13:36:30

赞

踩

nuxt3国际化

使用Nuxt3版本的一些感悟（"nuxt": "^3.2.3"）

一些基本需要了解的例如

页面布局 layout文件夹 和根目录下的app.vue文件

基于文件的路由目录 pages文加载 路由嵌套 传参等

自定义的组件components文加载 （使用时无需引入 如果想关闭可在nuxt.config.ts关闭）

//如果你想关闭自动导入,你可以将 imports.autoImport设置为 false.

  1. exportdefaultdefineNuxtConfig({
  2.   imports: {
  3.     autoImport: false
  4.   }
  5. })

可组合式API Composables 文件夹 就是自定义一些自己的hooks

Nuxt 内置了一些 如 useCookie、useRoute、useRouter、useState、useHead、useFetch、、、具体官网查看

middleware中间件目录 像Vue3中我们做一些路由守卫 就可以在这里写

plugins插件目录 使用的一些第三方组件可以在此处使用

目前项目中使用到的只有这些 具体的使用和描述还是以官网为准 只是自己的一些见解。。。

当前项目目前使用的插件如下

  1. "dependencies": {
  2.     "@ant-design/icons-vue": "^6.1.0",
  3.     "@pinia/nuxt": "^0.4.7",
  4.     "ant-design-vue": "^3.2.15",
  5.     "less": "^4.1.3",
  6.     "pinia": "^2.0.33",
  7.     "sass": "^1.59.3",
  8.     "vue-i18n": "^9.2.2"
  9. }

1.安装ant-design-vue

Nuxt中使用第三方组件库需要在根目录下创建plugins文件夹，并在文件夹中创建自己的插件名称（无需在nuxt.config.ts 文件中引入 Nuxt2需要手动引入）

如在plugins文件夹下创建ant-design-vue.ts 文件 内容如下 可选择全局引入或者按需加载

// import Antd from 'ant-design-vue'; 全局引入

  1. import { Button,Layout } from'ant-design-vue';
  2. exportdefaultdefineNuxtPlugin((nuxtApp) => {
  3.     // nuxtApp.vueApp.use(Antd);  全局使用 
  4.     nuxtApp.vueApp
  5.     .use(Button)
  6.     .use(Layout)
  7. });

当引入完组件后 接下来引入样式 因为antd的样式使用了Less作为开发语言 所以这里我使用了less文件 需要下载less

当然你也可以使用css样式文件 引入样式文件（需要注意的是在这里引入的样式文件会全局加载）

在nuxt.config.ts 文件中 

  1. exportdefaultdefineNuxtConfig({
  2.     css:[
  3.         // 'ant-design-vue/dist/antd.min.css',
  4.         'ant-design-vue/dist/antd.less',
  5.         '@/assets/css/animate.min.css',
  6.       ],
  7. })

现在在页面中就可以使用组件了

  1. <template>
  2.   <div>
  3.     <a-layout>
  4.       <a-layout-header>
  5.         Header 我是头部
  6.         <a-space>
  7.           <a-buttontype="primary">中文简体</a-button>
  8.           <a-buttontype="primary">英语</a-button>
  9.         </a-space>
  10.       </a-layout-header>
  11.       <a-layout-content>
  12.         Content 我是内容
  13.       </a-layout-content>
  14.       <a-layout-footer>Footer  我是底部</a-layout-footer>
  15.     </a-layout>
  16.   </div>
  17. </template>
  18. ​
  19. <scriptlang="ts"setup>
  20. </script>

2.使用vue-i18n 首先安装

同样像使用ant-design-vue一样需要在plugins文件夹中注册

根目录下创建locales文件夹

  1. locales
  2.  | - lang
  3.  | --- ZH      //中文语言文件夹 在里面可以创建其他文件夹或者文件   我自己喜欢以路由为文件夹创建
  4.  | ----- app.ts
  5.  | --- zh.ts   //  在这里引入上面中文里面ZH文件夹中所有的定义   同理下面EN文件夹也是如何  如果有第三个语言 也可以如此创建
  6.  | --- EN
  7.  | ----- app.ts
  8.  | --- en.ts
  9.  | - index.ts  引入文件 zh.ts en.ts  并且导出

以上面的中文为例

locales/lang/zh.ts

  1. importappfrom'./ZH/app'
  2. importpaymentfrom'./ZH/payment'//这里是我创建的一个文件夹  里面有一个index.ts文件 
  3. ​
  4. exportdefault {
  5.   ...app,
  6.   ...payment
  7. }

locales/lang/ZH/app.ts

  1. exportdefault {
  2.   app:{//自定义  例如 上面的payment文件夹的index  这里就可以使用文件夹的名称payment:{}  避免重复
  3.     title:'标题',
  4.     auth:'该页面需要登录请登录后重试'
  5.   }
  6. }

locales/index.ts 

  1. importzhLocalefrom'./lang/zh'; //引入本地语言  locales/lang/zh.ts
  2. importenLocalefrom'./lang/en'
  3. let zh= {
  4.   ...zhLocale,
  5. }
  6. let en= {
  7.   ...enLocale,
  8. }
  9. export { zh,en }//导出

plugins文件夹中创建vue-i18n.ts 文件 

  1. import { createI18n } from'vue-i18n';
  2. import { zh,en } from'@/locales/index';//本地语言库
  3. constmessage= {
  4.   zh,
  5.   en,
  6. }
  7. exportdefaultdefineNuxtPlugin((nuxtApp) => {
  8.   constCookie=useCookie('lang');  
  9.    //这里使用了内置api  可以快速设置获取cookie   当然这里也可以设置在localStorage中使用 不使用useCookie
  10.   Cookie.value=Cookie.value||'zh'
  11.   consti18n=createI18n({
  12.     legacy:false,//使用vue3组合式API时必须设置为FALSE
  13.     locale:Cookie.value||'zh',
  14.     fallbackLocale: 'zh', // set fallback locale
  15.     messages:message,
  16.     globalInjection:true,//全局注入$t函数
  17.   })
  18.   nuxtApp.vueApp.use(i18n)
  19. });

接下来是语言切换

可以在任意的页面或者组建中进行语言的切换

  1. <template>
  2.   <div>
  3.     <a-buttontype="primary"@click="switchLang('zh')">中文简体</a-button>
  4.     <a-buttontype="primary"@click="switchLang('en')">英语</a-button>
  5.   </div>
  6. </template>
  7. <scriptlang="ts"setup>
  8.   import { useI18n } from'vue-i18n';
  9.   const {  locale:renameLocale } =useI18n();
  10.     
  11.   constcurrentLang=useCookie('lang');//获取cookie中的lang
  12.   constswitchLang= (val:string)=>{
  13.     renameLocale.value=val;//本地使用的语言
  14.     currentLang.value=val;//更改cookie中的值
  15.   } 
  16. </script>

当完成以上的配置后 就可以在页面中使用了

使用的方法有两种 在页面中使用 和 在JS中使用。

  1. <template>
  2.   <section>
  3.     <p>{{ $t('app.title') }}</p><!-- 标题 -->
  4.   </section>
  5. </template>
  6. <scriptlang="ts"setup>
  7.   import { useI18n } from'vue-i18n';
  8.   const { t }  =useI18n();
  9.   console.log(t('app.title'))//标题
  10. </script>

此时基本的操作就已经完成了 但是我们需要在页面初始化的时候就要确认使用的语言

然后结合ant-design-vue组件库国际化 按照官方文档配置

ant-design-vue 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化文案

在根目录下的app.vue文件中 当然别忘了plugins/ant-design-vue.ts 文件中引入该组价

  1. <template>
  2.   <a-config-provider:locale="currentLang">
  3.     .........
  4.   </a-config-provider>
  5. </template>
  6. <scriptlang="ts"setup>
  7. importzhfrom'ant-design-vue/es/locale/zh_CN';
  8. importenfrom'ant-design-vue/es/locale/en_US';
  9. importdayjsfrom'dayjs'; 
  10. // ConfigProvider 不包含时间类组件的国际化，你需要额外引入时间库(dayjs、momentjs、date-fns 等)的国际化文件
  11. import'dayjs/locale/zh-cn';
  12. dayjs.locale('zh-cn');
  13. constcurrentLang=ref(en) ;//zh  en 
  14. </script>

但是这时候我们的antdesignvue不会随着我们切换语言而改变 因为切换按钮不在当前的app.vue文件内 如果在相同的页面的话现在可以创建响应性的数据currentLang直接使用，，但是真是的项目中切换语言的按钮往往只是一个单纯的切换不和其他的组件在一起

当我们点击切换按钮的时候 更改本地语言 并且更改cookie中的lang字段 此时app.vue如果能实时监控获取更改后的值 然后就可以改变currentLang的值

这里我是用的是pinia 像vuex一样pinia的数据也是响应性的

首先安装 pinia @pinia/nuxt

根目录下创建文件夹store 我这里创建了两个模块 方便以后数据的存储

  1. store
  2.  | - modules
  3.  | --- app.ts
  4.  | --- user.ts
  5.  | - index.ts

store/index.ts

  1. import {userStore} from'./modules/user';
  2. import {appStore} from'./modules/app'
  3. exportconstuseStore= ()=>({
  4.   userStore:userStore(),
  5.   appStore:appStore()
  6. })

store/modules/app.ts

​

  1. import { defineStore } from'pinia';
  2. // defineStore 方法有两个参数，第一个参数是模块化名字
  3. // 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
  4. exportconstappStore=defineStore('app', {
  5.   state(){  // 存放的就是模块的变量
  6.     return {
  7.       lang:useCookie('lang') ||'zh',
  8.     }
  9.   },
  10.   getters:{
  11.     getStateLang(state){// 页面中使用了多次，这里只会执行一次，然后缓存起来
  12.       returnstate.lang?state.lang:'zh'
  13.     },
  14.   },
  15.   actions:{
  16.     changeLang(lang:string) {
  17.       this.lang=lang;
  18.     },
  19.   }
  20. })

接下来更改app.vue中的代码

我们需要首次获取到当前本地cookie中的值 如果store获取不到默认zh

  1. <template>
  2.   <a-config-provider:locale="currentLang">
  3.     .........
  4.   </a-config-provider>
  5. </template>
  6. <scriptlang="ts"setup>
  7. importzhfrom'ant-design-vue/es/locale/zh_CN';
  8. importenfrom'ant-design-vue/es/locale/en_US';
  9. importdayjsfrom'dayjs';
  10.     
  11. import { useStore } from'@/store'
  12. import { storeToRefs } from'pinia'
  13. conststore=useStore();
  14.     
  15. //首次加载获取 默认zh
  16. constcurrentLang=ref(switchLangFun(store.appStore.getStateLang))
  17. //国际化时间组件
  18. watch(currentLang, val=> {
  19.   dayjs.locale(val.locale);
  20. });
  21.     
  22. //获取store中的语言  storeToRefs可以创建一个响应式的数据   具体使用方法还是需要官方文档
  23. const { lang } =storeToRefs(store.appStore);
  24. watch(lang,val=>{
  25.   if(val) currentLang.value=switchLangFun(val)
  26. })
  27. //本地cookie中的zh是字符串
  28. functionswitchLangFun(val:string){
  29.   switch(val){
  30.     case'zh':
  31.       returnzh
  32.     case'en':
  33.       returnen
  34.     case'hk':
  35.       returnhk
  36.     case'ar':
  37.       returnar
  38.     default:
  39.       returnzh
  40.   }
  41. }  
  42. </script>

到这里还有一个操作不要忘记 就是当我们点击切换的时候还要更改store中的lang的值

更改你刚才切换语言的组件

  1. <template>
  2.   <div>
  3.     <a-buttontype="primary"@click="switchLang('zh')">中文简体</a-button>
  4.     <a-buttontype="primary"@click="switchLang('en')">英语</a-button>
  5.   </div>
  6. </template>
  7. <scriptlang="ts"setup>
  8.   import { useI18n } from'vue-i18n';
  9.   const {  locale:renameLocale } =useI18n();
  10.     
  11.   constcurrentLang=useCookie('lang');//获取cookie中的lang
  12.   constswitchLang= (val:string)=>{
  13.     renameLocale.value=val;//本地使用的语言
  14.     currentLang.value=val;//更改cookie中的值
  15.       
  16.       
  17.     //改变store
  18.   store.appStore.changeLang(val)  ///changeLang为store中的actions方法
  19.   } 
  20. </script>

至此这个项目中使用vue-i18n 已经完成。。。。。。。

但是、、、、当我感觉一切都完成的时候 此时又发现一个问题

因为在vue的项目中难免会遇到路由守卫

通过对Nuxt的了解我们知道在Nuxt的项目中我们可以在middleware中间件中使用路由守卫。直接在middleware文件夹下创建文件即可。这里有全局的中间件和作用于文件的中间件 如何使用以官网为准

创建auth.global.ts文件 含有.global的文件即为全局中间件 创建这个中间件主要对页面需要token的页面进行拦截 如果不存在token则重定向login登录或者提示信息 （即使这个中间件不提示信息只做重定向 但是肯定会有别的中间件会提示信息进行拦截 比如某个页面需要一定的管理员权限才能进去 此时就不能重定向某个页面 只能提示然后终止导航）

auth.global.ts

​

  1. import { messageasMessage,Modal } from'ant-design-vue'
  2. import { useI18n } from'vue-i18n';
  3. exportdefaultdefineNuxtRouteMiddleware((to, from) => {
  4.   if(process.client){//只在客户端显示   具体请以官网为准
  5.     const {t}  =useI18n();
  6.     consttoken=useCookie('app-token');
  7.     //某些特定的页面不需要token  login register  reset  
  8.     constnoTokenPath= ['/login','/register','/reset']
  9.     if(!noTokenPath.includes(to.path)){
  10.       if(!token.value){
  11.         // Message.error('This is an error message');
  12.         // return abortNavigation('500')
  13.         Modal.error({
  14.           title: 'Tip',
  15.           content: t('app.auth'),//该页面需要登录请登录后重试
  16.         });
  17.       }
  18.     }
  19.   }
  20. ​
  21. })

因为提示的信息 肯定也是国际化的 按照正常的操作引入

import { useI18n } from 'vue-i18n';const { t } = useI18n();

但是当我们使用 t('app.auth') 系统就会报错 Must be called at the top of a setup function因为vue-i18n 必须在setup中使用。

这时候我们需要plugins插件的帮助

更改 plugins/vue-i18n.ts 文件

  1. import { createI18n } from'vue-i18n';
  2. import { zh,en } from'@/locales/index';//本地语言库
  3. constmessage= {
  4.   zh,
  5.   en,
  6. }
  7. exportdefaultdefineNuxtPlugin((nuxtApp) => {
  8.   constCookie=useCookie('lang');  
  9.    //这里使用了内置api  可以快速设置获取cookie   当然这里也可以设置在localStorage中使用 不使用useCookie
  10.   Cookie.value=Cookie.value||'zh'
  11.   consti18n=createI18n({
  12.     legacy:false,//使用vue3组合式API时必须设置为FALSE
  13.     locale:Cookie.value||'zh',
  14.     fallbackLocale: 'zh', // set fallback locale
  15.     messages:message,
  16.     globalInjection:true,//全局注入$t函数
  17.   })
  18.   nuxtApp.vueApp.use(i18n)
  19.    //新增的  提供一个辅助函数    然后在中间件auth.global.ts中调用
  20.   return{
  21.     provide:{
  22.       myi18n:()=>i18n
  23.     }
  24.   }
  25. });

更改middleware/auth.global.ts 

  1. import { messageasMessage,Modal } from'ant-design-vue'
  2. //import { useI18n } from 'vue-i18n';
  3. exportdefaultdefineNuxtRouteMiddleware((to, from) => {
  4.    
  5.    ///新增的
  6.   const { $myi18n } =useNuxtApp()
  7.   const { t } =$myi18n().global
  8.     
  9.   if(process.client){//只在客户端显示   具体请以官网为准
  10.     //const {t}  = useI18n();
  11.     consttoken=useCookie('app-token');
  12.     //某些特定的页面不需要token  login register  reset  
  13.     constnoTokenPath= ['/login','/register','/reset']
  14.     if(!noTokenPath.includes(to.path)){
  15.       if(!token.value){
  16.         // Message.error('This is an error message');
  17.         // return abortNavigation('500')
  18.         Modal.error({
  19.           title: 'Tip',
  20.           content: t('app.auth'),//该页面需要登录请登录后重试
  21.         });
  22.       }
  23.     }
  24.   }
  25. ​
  26. })

nuxt.config.ts中别忘了添加去除vue-i18n控制台警告

  1. exportdefaultdefineNuxtConfig({
  2.     ...
  3.     vite:{
  4.         ...
  5.         resolve:{
  6.           alias:{
  7.             'vue-i18n':'vue-i18n/dist/vue-i18n.cjs.js'
  8.           }
  9.         }
  10.         ...
  11.     }
  12.     ...
  13. })

至此vue-i18n的使用基本已经完成，本地测试没有问题，打包本地测试也没有问题。end。。。。。。。。。。。。。

在Nuxt3中结合Ant-design-vue如何自定义主题。

这个问题我网上找了好多天的资料 都没有解决 最终在结合之前的vue3项目才解决掉，原本的出发点就不正确 一直以为解决的出发点应该在nuxt中解决 最终解决的方法在Vite插件配置中解决。需要安装插件 vite-plugin-style-import yarn add vite-plugin-style-import -D

  1. import { createStyleImportPlugin,AntdResolve } from'vite-plugin-style-import'
  2. exportdefaultdefineNuxtConfig({
  3.     ...
  4.     vite:{
  5.         plugins:[
  6.           createStyleImportPlugin({
  7.             resolves: [AntdResolve()],
  8.           }),
  9.         ],
  10.         css:{
  11.             preprocessorOptions: {
  12.                 less: {
  13.                   modifyVars: {// 更改主题
  14.                     // hack: `true; @import (reference) "${path.resolve('src/assets/less/global.less')}";`,
  15.                     'primary-color': '#2096f3', // 全局主色
  16.                     'link-color': '#2096f3', // 链接色
  17.                     'success-color': '#00B86B', // 成功色
  18.                     'warning-color': '#FF9500', // 警告色
  19.                   },
  20.                   javascriptEnabled: true,
  21.                 },
  22.               },
  23.         }
  24.     }
  25.     ...
  26. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/814259
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号