Nuxt3遇見的坑（四）：圖片動(dòng)態(tài)渲染之后打包路徑問題以及打包c(diǎn)ss樣式問題

圖片問題

我官網(wǎng)有個(gè)組件是非常多的圖片，大概有40多張吧，那我肯定不能一張一張去寫一個(gè)img，所以我用了v-for去循環(huán)渲染

<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>

這樣子去渲染，在開發(fā)環(huán)境是完全沒有問題的，非常的nice
但是當(dāng)我build之后，通過v-for渲染的圖片，路徑全部都找不到了，Nuxt3沒有吧路徑重新編譯，導(dǎo)致我放在assets里面的圖片也沒有被打包到.output文件夾里面，之后就路徑錯(cuò)誤了，在網(wǎng)上找了很多方法，很多都是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是可以使用的，因?yàn)閚uxt2支持require，但是nuxt3不行，他不支持require，然后我也沒有找到能讓他支持的方法，開發(fā)環(huán)境支持我找到了，但是打包之后還是會(huì)出現(xiàn) require is not defined。所以我放棄使用這種方法

在找了很多辦法之后，最后我吧assets/images里面的圖片全部放在了 public里面，在最頂層文件夾創(chuàng)建public文件夾，把所有圖片放進(jìn)去，然后吧圖片路徑全部修改，

<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在打包的時(shí)候會(huì)把public里面的文件全部打包，圖片路徑就不會(huì)出錯(cuò)了。

css問題

圖片處理好了，然后發(fā)現(xiàn)我自己定義的全局css樣式全部沒有加載，同樣也是打包的時(shí)候，路徑?jīng)]有打包成功，一開始我的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" },],},}, })

這樣配置之后，開發(fā)環(huán)境完全沒有問題，但是一打包，一發(fā)布，全部404
然后就改，看官方文檔，改成設(shè)置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',] })

這樣倒是不報(bào)scss文件404了，直接就沒有了，我的字體，全局樣式一個(gè)都沒有加載出來

最后在一個(gè)論壇看到了一串代碼加上就好了

// 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樣式都加載成功，目前原因不知道，反正解決方法就是這樣。

總結(jié)

以上是生活随笔為你收集整理的Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。