vite 打包vue，style 中的背景图丢失了

Vite 是一个现代的前端构建工具，它采用了预渲染、SSR (服务器端渲染) 和高效的文件系统监听等技术，能快速地构建Vue应用。然而，在打包过程中，如果Vue项目中的CSS样式包含背景图片路径，可能会遇到问题，特别是当图片位于相对路径下时。

在Vite中，由于其默认配置是静态资产分离，这意味着静态资源（如图片）不会直接被打包到dist目录下，而是会被复制到一个单独的public文件夹。如果你的背景图片引用的是相对路径，并且指向的是dist公共文件夹之外的路径，打包后访问到的图片就可能找不到，导致显示为空白或者404错误。

解决这个问题通常需要做以下操作：

1. **修改图片路径**：将图片移到public文件夹内，或者使用绝对路径（例如`/images/myimage.png`），让Vite能够识别并正确打包。

2. **配置alias**：在vite.config.js中设置全局的url alias，告诉Vite如何映射特定的路径。例如：

   build: {
     assetsDir: 'static',
     rollupOptions: {
       input: 'src/main.ts',
       output: {
         assetFileNames: 'assets/[name].[hash]./[ext]',
         dir: './'
       },
       external: ['vue', 'axios'],
       resolve: {
         alias: {
           '@': resolve('src'),
           images: resolve('src/assets/images') // 映射images路径
         }
       }
     }
   }

3. **使用插件处理**：可以使用像`@vitejs/plugin-vue-router-assets-paths`这样的插件来帮助处理Vue路由下的静态资源路径。