Vite打包后SCSS引用的图片路径不对,该如何解决?-灵析社区

中年复健狗

为什么vite打包后scss中引用的图片路径不对 vite配置如下: build: { rollupOptions: { // 静态资源分类打包(部署要区分js,css,img文件夹,对应后端的配置) output: { chunkFileNames: 'js/[name]-[hash].js', entryFileNames: 'js/[name]-[hash].js', assetFileNames: (assetInfo) => { if (extname(assetInfo.name) === '.css') { return `css/[name]-[hash].[ext]`; } else { return `img/[name]-[hash].[ext]`; } } } } } scss文件和图片文件目录结构如下: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/91d695ec61c9b877b916dfb6e9bf6e07.png) 打包后的目录结构: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/79e3a4e782a697bf242e336b404323b8.png) 打包后的css文件中的图片引用: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/32b646f2ed7534faf1e31467749fbbb0.png) 打包后正确的引用路径应该是这样:url(../img/add-1bd6048f.svg) 大佬问解惑下,为什么打包后的图片引用不对。 如果可以,不改变现有的文件目录和打包后的目录结构 现有的项目文件目录要合规范,所以这样放置。 打包后的目录是部署要求要这样的结构。

阅读量:227

点赞量:0

问AI
原因找到了 这次服务器上前端部署的地址是: "a/b/前端资源" 一开始没注意,没配置base,打包后资源定位不正确,页面打不开 后来改了base,配置为./页面打开了以为就可以了. 现在改成:"base: '/a/b'"就好了