Nuxt 项目总结

渲染方式

ssr： 服务端渲染

返回的html有内容：

再看下返回的element:

客户端渲染

配置下，更改为客户端渲染

看下返回的内容：

再看下返回的element:

请求数据

useFetch

初始化数据时：

有些页面，初始化的数据是从接口查出来的。我们就需要用到useFetch()了
看下产品页：

产品页初始化的时候需要两个接口组装数据：

• 分类接口
• 产品列表接口
  所以在server底下我写了两个js：
  
  在product.vue页面使用很简单：
  
  
  这样产品页的html中就有了分类和产品列表返回内容

重复使用数据时：

比如分类数据

1. 对于后台管理页来说：
   使用的是useLazyFetch,这样返回html页面中是不会包含分类的数据，在导航之前就会请求数据，不会阻塞导航
   
2. 官网页
   还是使用的useFetch，会阻塞导航，拼装上数据之后返回完整的html页面

• 在产品新增页使用到了分类
• 在产品列表页按分类查询也用到了分类数据

3. 哪些地方使用了？
   分类数据可以使用useFetch请求，这样请求的分类列表会存放到useNuxtData中，不需要每个使用分类数据的地方都查询下数据库
   但是在改变分类时，需要调用下刷新接口，缓存时间我再看看。。。。。
   

$fetch

其他地方我好像都使用了$fetch

客户端调用接口跨域配置：

注： 跨域是浏览器产生的，接口放在server中是不会有跨域问题的

  nitro: {
    devProxy: {
      '/proxy': {
        target: process.env.DOMIN_NAME,
        changeOrigin: true,
        rewrite: (path: string) => path.replace(new RegExp('/proxy'), '') //这个就算不写替换，好像也自动去掉了，把这句话注释，也没有问题
      },
      '/file': {
        target: 'http://prexcgzjy.yzxsaas.com/file/', changeOrigin: true,
      }
    }
  },

组件

用到了element和swiper

element默认字体变为中文

 elementPlus: {
    importStyle: 'scss',
    defaultLocale: 'zh-cn'
  },

element自定义上传图片

上传图片时不要加content-type：''要不然上传不成功！！！
不会生成红框圈出的内容

return $fetch(url, {
    baseURL,
    method: 'POST',
    body: formData,
    headers: {
      token
    },
  })

swiper 怎么更改分页、上一页、下一页的样式

swiper-container::part(button-next) {}
swiper-container::part(button-prev) {}
swiper-container::part(pagination) {}

运行生产包

一定要加--dotenv这个参数哦，要不然读取不到参数
linux可以使用以下start.sh

#!/bin/bash
nohup node ./output/server/index.mjs --dotenv .env &