Vue3+Vite 导航与内容div都填了背景，打包的时候，发现直接报错(Rollup failed to resolve import “resource/img/xx.jpg“)的解决

1、先上个打包时报错的图：

2、上个一开始的代码：

<div class="flex justify-left bg-white h-26 items-center text-2xl pl-10">
      <!-- <img src="../../../assets/images/logo.png" class="w-10 h-10" /> -->
      <div class="ml-2">
        <img src="resource/img/xx.jpg" style="width: 450px; height: auto; object-fit: cover" />
      </div>
    </div>

上面的代码，在测试的时候，一切都正常的，但是在打包的时候，直接通不过。

3、我们来通过定义import解决这个问题：

<div class="flex justify-left bg-white h-26 items-center text-2xl pl-10">
      <div class="ml-2">
        <img :src="wordImg" style="width: 450px; height: auto; object-fit: cover" />
      </div>
    </div>

const wordImg = ref('resource/img/word.jpg');

说明：也就是我们用ref来包裹一下就可以了，当然这个里的src记住前面加一个：冒号。

4、然后我们发现style中的图片打包时，没有报错，但是上传完成，访问的时候一片空白，报的是404的错误：

.bg {
    background-image: url('resource/img/bg.jpg');
    background-size: cover;
    background-position: center; /* 将图片居中显示 */
    min-height: calc(100vh-100px); /* 确保至少为视口高度 */
  }

可以这样我们用assets下的图片，将resource/img下的图片拷到assets下面：

.bg {
    background-image: url('/@/assets/img/bg.jpg');
    background-size: cover;
    background-position: center; /* 将图片居中显示 */
    min-height: calc(100vh-100px); /* 确保至少为视口高度 */
  }

assets下的图片，打包的时候，会检查并且生成一个临时的文件，以图片名称开头，图片大的时候，会进行一次压缩（这个会导致失真的情况），具体的还得看图片的大小。

5、我们再次打包，发现一切正常。