浅谈nuxt3+Element-plus+i18n国际化+tailwincss 实际项目出现的问题一览_nuxt3 i18n

最近使用nuxt3 服务端渲染 + vue-i18n国际化 + Element-plus 用于实际开发项目中所遇见的问题；

nuxt2我都没搞懂，直接上手3了，很多东西都不是太懂，算是探索吧；nuxt3注重模块化了

tips: 我用的 ts；

问题：

1. 如何加入 Element-plus 第三方组件库？

   答： 这里使用的是Element-plus 官方的例子；例子地址；最开始用的antd的组件库，后来发现开发模式中使用没问题，打包就不行，后来放弃了；Element-plus官方例子也有一个小问题，就是报引入组件库的错，按照报错改源码的引入方式即可成功，估计是我ts.config没配置好；

   使用组件要在页面上引用

       import {
        ElCarousel,
        ElCarouselItem,
        ElTabs,
        ElTabPane,
        ElMessage,
      } from "element-plus";
   1
   2
   3
   4
   5
   6
   7

2. 如何引入tailwindcss？

   答： nuxt3 的nuxt.config.ts配置相对来说就简单了许多；

   yarn add @nuxtjs/tailwindcss

   在nuxt.config.ts中加载

   export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
   })
   1
   2
   3

   完了…

   没错就是这么简单，想自定义tailwindcss的 在根目录下创建tailwind.config.js 就自己定义，会自动加载的；

3. 引入i18n国际化？

   答：
   引入：

   yarn add vue-i18n
   yarn add @nuxtjs/i18n
   1
   2

   1. 在pages目录同级目录下创建plugins和locales目录。

   2. 在plugins中创建i18n.ts，在locales创建对应的zh.js或zh
      .json文件；

   3. 我这语言有点多 哈哈

   
       import { createI18n } from 'vue-i18n'
       import Cookies from 'js-cookie'
       import ar from '@/locales/ar.json';
       import en from '@/locales/en.json';
       import es from '@/locales/es.json';
       import fr from '@/locales/fr.json';
       import hi from '@/locales/hi.json';
       import ja from '@/locales/ja.json';
       import ru from '@/locales/ru.json';
       import zh from '@/locales/zh.json';
       import zhtw from '@/locales/zhtw.json';
   
       const message = {
           ar,
           en, 
           es, 
           fr, 
           hi, 
           ja, 
           ru,
           zh,
           zhtw
       }
   
   
       const i18n = createI18n({
           legacy: false,
           globalInjection: true,
           locale: Cookies.get('lang') || 'zh',
           warnHtmlMessage: false,
           messages: message
       })
   
   
   
       export default defineNuxtPlugin(nuxtApp => {
           nuxtApp.vueApp.use(i18n);
       })
   
       ```
   
   5. 不需要在nuxt.config.ts中配置了，不用配置，不用配置。。。就可以使用了；
   
   6. 使用
       1. 
       ```
       <h2 class="theme">{{ $t("home.title") }}</h2>
       ```
       2.在script中使用
       ```
       <script setup lang="ts">
           import { useI18n } from "vue-i18n";
           const { t，locale } = useI18n();
   
           const title = ref<string>(t("home.title"));
   
           //改变语言
           //就可以全局改变语言了；
   
           locale.value = 'zhTW'
   
       </script>
   
       ```
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65

4. 如何监听路由？

   在plugins中创建route.ts文件

   route.ts

   import Cookies from "js-cookie";
   
   
   export default defineNuxtPlugin(nuxtApp => {
       const { beforeEach, } = useRouter();
   
   
       const lang = Cookies.get('lang');
       beforeEach((to, from) => {
           if (to.name) {
               if (to?.params?.lang) {
                   Cookies.set('lang', to.params.lang as string)
               } else if (lang) {
                   return navigateTo(`/${lang}/`)
               } else {
                   return navigateTo(`/zh`)
               }
           } else {
               return navigateTo(`/zh`)
           }
       })
   })
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23

我在这里做的国际化路径的seo，
ps: nuxt3 自带cookies， 我是做完了才看到文档，懒得去改了；

5. 数据请求？

nuxt3使用fetch，
在服务器获取数据请使用: useAsyncData();

export const getOrder = async (params?: { [key: string]: any }) => {
    const { data, pending, refresh, error } = await useAsyncData<{ code: number, data: any }>('order', () => $fetch(basicUrl + Api.Exchange, { params, method: 'get' }));
    return { data, pending, refresh, error }
}

1
2
3
4
5

在浏览器访问数据去掉useAsyncData() 即可；

ps： 翻页或者需要再次请求同一个接口的数据 使用useAsyncData这个不会再次执行，第二次不会获取数据；

感谢阅读！