如何在Vite中使用CSS图片？解决url()路径无法解析问题

• 检查Vite的base配置
  如果你的项目不是部署在域名根目录，需要在vite.config.js里设置正确的base值，比如相对路径部署的话：

  export default {
    base: './'
  }
  

  默认base为/，部署路径不匹配时会导致相对路径的url无法正确解析。

• 使用路径别名（更可靠）
  配置Vite的路径别名，避免相对路径出错：

  1. 在vite.config.js中添加别名配置：

     import { defineConfig } from 'vite'
     import path from 'path'
     
     export default defineConfig({
       resolve: {
         alias: {
           '@': path.resolve(__dirname, './src')
         }
       }
     })
     

  2. 在CSS中使用绝对别名路径：

     .element {
       background-image: url("@/assets/images/my-image.png");
     }
     

  这样Vite会自动解析为正确的资源路径。

• 验证文件路径正确性
  确认CSS文件中../assets/images/my-image.png的相对路径是准确的，比如CSS文件在src/styles/下，对应文件应该在src/assets/images/my-image.png，路径错误会导致Vite无法识别，只能原样输出。

• 通过Vite服务访问或正确打包
  不要直接打开本地HTML文件，必须通过npm run dev启动Vite开发服务器访问页面，或者执行npm run build打包后部署，否则Vite的路径解析逻辑不会生效。

内容的提问来源于stack exchange，提问作者drake035