Vue2+Vite项目部署后Body背景图片丢失问题求助

错误原因 #

你在SCSS中使用了~@/assets/img/bg.png这类路径写法，Vite不支持~前缀。Webpack里常用~标识别名或node_modules路径，但Vite的路径解析逻辑不同，它会把~当作普通路径字符处理，最终~被URL编码为%7E，导致请求路径变成assets/%7E@/assets/img/bg.png，无法匹配到正确的图片资源。

解决步骤 #

1. 修正SCSS中的图片路径
   直接去掉~前缀，使用Vite配置的别名@即可，示例：

   body {
     background-image: url('@/assets/img/bg.png');
     // 也可以用相对路径（如果SCSS文件和img目录有明确层级关系）
     // background-image: url('../assets/img/bg.png');
   }
   

2. 确认Vite别名配置有效性
   检查vite.config.js/ts里是否正确配置了@指向src目录，确保别名生效：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   
   export default defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src')
       }
     }
   })
   

3. 重新构建部署
   执行npm run build重新打包项目，再部署到预发布环境。此时图片路径会被正确编译为部署根目录下的资源路径，比如/assets/img/bg.hash.png（Vite会自动处理静态资源的哈希值和路径）。

额外验证项 #

• 检查package.json的build命令是否正确，确保调用的是vite build：

  {
    "scripts": {
      "build": "vite build"
    }
  }
  

• 构建后查看dist目录下的CSS文件，确认图片路径已被替换为编译后的正确路径，而非保留~@这类未解析的写法。

内容的提问来源于stack exchange，提问作者R-b-n