vite中，这样的路径会解析错误，怎么办？

Question

如何在backgroundImage中使用 路径别名@ 和 变量 呢？

Answer 1

这个是需要配置的, 参考:

https://juejin.cn/post/7065314821129895967
https://segmentfault.com/q/1010000039989095/a-1020000039991721
https://segmentfault.com/a/1190000041417219

vue3项目中配置vite.config.ts时使用path模块报错

https://segmentfault.com/a/1190000041500725

Answer 2

1. import('xxxx').then 动态导入
2. new URL(`@/assets/${item}.jpg`, import.meta.url)

Answer 3

url('@/assets/images/${fileName}.jpg')
const fileName = ref('我是乱编的');

你猜能不能拿到这个图片，要是你说能拿到，那我在某一个时机把这个变量变成一个随机数呢，打包的时候会不会主动去打包进来？显然不会，正常的做法是

url('${file}')
import file from '@/assets/images'
或者
import fileA from '@/assets/images/a.jpg'
import fileB from '@/assets/images/b.jpg'
const files = [fileA, fileB];
<div v-for='file in files' :style="{ background: `url(${file})` }"  />