vite汇总css背景img，缺少反应url图像

Question

我有一个vue3 vite项目，有一个背景缺失问题

这里有我的vue项目目录树：

src/assert/pic1.png

src/components/pages/Page1/Page1.vue

我在Page1.vue:background-image: url("src/assert/pic1.png")中使用css背景img标记

dev-env中的这个设置已经起作用了，请求url是http://.../src/assert/pic1.png

但在测试环境中，请求url变为http://.../src/assets/src/assert/pic1.png

我想可能是卷装设置有问题，但我不知道如何修复…

Answer 1

通过以下操作在vite.config中添加resolve.alias。

https://vitejs.dev/config/shared-options.html#resolve-别名

vite.config.js

import path from "path";
// ...
resolve: {
alias: {
"@": path.resolve(__dirname, "./src")
}
}

Page1.vue

background-image: url("@/assert/pic1.png")

Answer 2

在中找到了解决方案https://vitejs.dev/guide/assets.html

1. 导入图片路径作为backgroundUrl变量import backgroundUrl from "~/assert/pic1.png"

2. 在"script"标记const backgroundStyle = `background-image:url(${backgroundUrl})`中设置为变量

3. 在目标文档元素集中设置反应式<div :style=backgroundStyle>