文章详情 - 宏推科技

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

图片问题

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

<template>
  <transition :duration="duration">
    <div  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>
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

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

<template>
  <transition :duration="duration">
    <div >
      <div  ref="photoWall">
        <div  v-for="(item, index) in itemList">
          <img :src="require(`${item.url}`)" alt="" />
        </div>
      </div>
    </div>
  </transition>
</template>
1
2
3
4
5
6
7
8
9
10
11

上面哪种方法在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>
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

这样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" },
      ],
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样配置之后，开发环境完全没有问题，但是一打包，一发布，全部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'',
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样倒是不报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''],
        },
      },
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17