Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题

Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题

图片问题

我官网有个组件是非常多的图片，大概有40多张吧，那我肯定不能一张一张去写一个img，所以我用了v-for去循环渲染

<template>
  <transition :duration="duration">
    <div class="photo-item" v-for="(item, index) in itemList">
      <img :src="`${item.url}`" alt="" />
    </div>
  </transition>
</template>

<script lang="ts" setup>
const duration = ref(0);
const itemList = ref([
  {
    url: 'assets/images/index/xxx/1.png',
    type: 2,
  },
  {
    url: 'assets/images/index/xxx/2.png',
    type: 1,
  },
  {
    url: 'assets/images/index/xxx/3.png',
    type: 3,
  },
  {
    url: 'assets/images/index/xxx/4.jpg',
    type: 2,
  },
  {
    url: 'assets/images/index/xxx/5.png',
    type: 1,
  },
  ...
]);
</script>

这样子去渲染，在开发环境是完全没有问题的，非常的nice
但是当我build之后，通过v-for渲染的图片，路径全部都找不到了，Nuxt3没有吧路径重新编译，导致我放在assets里面的图片也没有被打包到.output文件夹里面，之后就路径错误了，在网上找了很多方法，很多都是nuxt2的解决方法，比如

<template>
  <transition :duration="duration">
    <div class="international-exhibitions container-fluid">
      <div class="photo-wall container-fluid" ref="photoWall">
        <div class="photo-item" v-for="(item, index) in itemList">
          <img :src="require(`${item.url}`)" alt="" />
        </div>
      </div>
    </div>
  </transition>
</template>

上面哪种方法在nuxt2是可以使用的，因为nuxt2支持require，但是nuxt3不行，他不支持require，然后我也没有找到能让他支持的方法，开发环境支持我找到了，但是打包之后还是会出现 require is not defined。所以我放弃使用这种方法

在找了很多办法之后，最后我吧assets/images里面的图片全部放在了 public里面，在最顶层文件夹创建public文件夹，把所有图片放进去，然后吧图片路径全部修改，

<script lang="ts" setup>
const itemList = ref([
  {
    url: 'images/index/xxx/1.png',
    type: 2,
  },
  {
    url: 'images/index/xxx/2.png',
    type: 1,
  },
  {
    url: 'images/index/xxx/3.png',
    type: 3,
  },
  {
    url: 'images/index/xxx/4.jpg',
    type: 2,
  },
  {
    url: 'images/index/xxx/5.png',
    type: 1,
  },
  ...
]);
</script>

这样nuxt3在打包的时候会把public里面的文件全部打包，图片路径就不会出错了。

css问题

图片处理好了，然后发现我自己定义的全局css样式全部没有加载，同样也是打包的时候，路径没有打包成功，一开始我的css路径是这样配置的。

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    plugins: [viteCommonjs()],
  },
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: "assets/styles/font.scss" },
        { rel: 'stylesheet', href: "assets/styles/index.scss" },
        { rel: 'stylesheet', href: "assets/styles/main.scss" },
      ],
    },
  },
})

这样配置之后，开发环境完全没有问题，但是一打包，一发布，全部404
然后就改，看官方文档，改成设置css

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      // link: [
      //   { rel: 'stylesheet', href: "assets/styles/font.scss" },
      //   { rel: 'stylesheet', href: "assets/styles/index.scss" },
      //   { rel: 'stylesheet', href: "assets/styles/main.scss" },
      // ],
    },
  },
  css: [
    '@/assets/styles/font.scss',
    '@/assets/styles/index.scss',
    '@/assets/styles/main.scss',
  ]
})

这样倒是不报scss文件404了，直接就没有了，我的字体，全局样式一个都没有加载出来

最后在一个论坛看到了一串代码加上就好了

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@/assets/styles/font.scss',
    '@/assets/styles/main.scss',
    '@/assets/styles/index.scss',
  ],
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          loadPaths: ['@/assets/styles'],
        },
      },
    },
  },
})

这样我的所有css样式都加载成功，目前原因不知道，反正解决方法就是这样。