nuxt3开发问题

内容分享6天前发布羽绒阿

0 0 0

目的

记录 nuxt3 开发遇到的一些问题，方便自己查阅。网上关于 nuxt3 的中文文档较少，所以记录一下

nuxt3 介绍

Nuxt 是一个开源框架，使得 Web 开发变得直观且强劲。可以自信地创建高性能和生产级别的全栈 Web 应用和网站。

项目技术框架介绍

nuxt3：优势 ssr 和 ssg，ssg 只适合不频繁变动的项目
vue3
vite：构建工具
@nuxt/ui：选择该 ui 框架是由于它就是为了支持 nuxt 做的，正确使用不会出现水合问题，但是功能也比较简单。
v-calendar：nuxt-ui 缺少日期组件，以及表单验证功能。此为日期组件
yup：表单验证工具，这个只能验证表单错误，无法自动与 dom 配合。例如使其输入框边框，错误校验在输入框底下显示。
@ant-design-vue/nuxt：业务越发复杂，为了不自己再开发一些复杂组件，复杂功能，引入此 ui 框架。所以一开始应该选择好 ui 框架
@nuxtjs/i18n：国际化
exceljs：excel 导出

构建方式

SSG（静态网站）

问题

一、SSG 构建生成后，接口更新后，页面数据不更新

问题缘由

官网对 SSG 的介绍是基于爬取的预渲染。所以会在预渲染对遇到的接口进行缓存，缓存在 payload.js，所以在部署后，用户在客户端的接口会改成对 payload.js 的请求，所以不会更新。

解决方法

方法一：不用 SSG 构建(npm run generate)，而是用 SSR 构建（npm run build），通过 node 部署
方法二：将接口改成在客户端请求，也就是在 onMounted 中请求，但是这部分数据就不会有 SEO 效果（右键源码没有这部分数据）

二、SSG 构建生成后，刷新页面，会进行重定向 302 或 301

问题缘由

由于 pages 下的文件默认生成的格式是/about/index.html,所以访问/about, 会重定向到/about/.

解决方法

方案一：服务端帮忙进行重定向配置，网上能搜索到，没有进行验证
方案二：nuxt.config.js 中 nitro.prerender.autoSubfolderIndex 设置为 false，生成的文件变成 about.html，访问就不会重定向

三、SSG 构建生成后，首次（禁用缓存）加载页面，字体图标显示方框。

问题缘由

字体文件下载慢，由于页面有许多资源（图片等）要下载，字体文件是在 css 文件加载后再进行下载，所以请求排队靠后，下载也就慢。不同项目可能不会出现这个问题，跟项目有关。

解决方法

可以通过预加载字体文件解决，代码如下，放置在 head 标签最顶上：

<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/iconfont.woff2" />

四、SSG 构建生成页面源码，css 是内联在 html 中

问题缘由

nuxt3 构建，为了更快的首屏加载，会将 css 内敛到 html 中。

为什么要解决这个问题

有人提出 html 源码内容太杂，太乱，被 css 占了大部分，即使这部分可能对 SEO 没影响

解决方法

nuxt.config.js 添加如下配置

{
    features: { inlineStyles: false },
}

五、ant-design-vue 的表格一开始没有样式

问题缘由

由于是 SSG，所以一开始就有表格的接口，但是 ant-design-vue 的样式文件一开始没有加载，所以出现样式问题。ant-design-vue 的版本为 4.2.5

解决方法

1、方案一：antd 可以预先生成使用组件的 css 样式，代码如下

// 去掉antd前缀
  <a-config-provider :theme="{ hashed: false }">
    <NuxtLayout name="default">
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </a-config-provider>

// 通过node命令执行，例如 node antd-css.js
import { createCache, extractStyle, StyleProvider } from "ant-design-vue/lib/_util/cssinjs/index.js";
import { Tree, Table, Upload, Popover, ConfigProvider } from "ant-design-vue";
import { renderToString } from "vue/server-renderer";
import { createVNode } from "vue";
import fs from "fs";
const cache = createCache();
const filePath = "./public/assets/styles/antd.css";

function writeFile(path, content) {
  const isExist = fs.existsSync(path);
  if (isExist) {
    fs.unlinkSync(path);
  }
  fs.writeFile(path, content, { flag: "w+" }, (err) => {
    if (err) {
      console.log(err);
    }
  });
}
renderToString(
  createVNode(StyleProvider, { cache }, [
    createVNode(ConfigProvider, { theme: { hashed: false } }, [
      createVNode(Tree),
      createVNode(Table),
      createVNode(Upload),
      createVNode(Popover),
    ]),
  ]),
).then((res) => {
  const styleText = extractStyle(cache);
  let cssText = styleText
    .replace(/<style[^>]*>|</style>/g, "")

  writeFile(filePath, cssText);
});