Vue 项目中静态资源引用问题
1.问题描述
在 Vue + Vite 项目中，直接使用相对路径或绝对路径引用本地图片资源时，图片无法正确显示。
错误示例
```javascript
// 错误方式1：使用相对路径
const products = [
{
name: 'iPhone 14 Pro',
image: '../assets/iphone.jpg' // ❌ 相对路径可能找不到正确位置
}
]
// 错误方式2：使用项目绝对路径
const products = [
{
name: 'iPhone 14 Pro',
image: '/shopping-mall/src/assets/iphone.jpg' // ❌ 生产环境中路径会失效
}
]
```
这些路径的问题：
-
相对路径 `../assets/` 在运行时可能找不到正确位置
-
绝对路径 `/shopping-mall/src/assets/` 在打包后会失效
-
不会被 Vite 正确处理和优化
-
生产环境中可能出现 404 错误
2. 解决方案
在 Vue + Vite 项目中，应该使用 `import` 方式导入静态资源。
正确示例
```javascript
// 1. 在文件顶部导入图片
import iphone14Pro from '../assets/Apple iPhone 14 Pro.jpg'
import airJordan from '../assets/Nike Air Jordan 1.jpg'
// 2. 在数据中使用导入的变量
const products = [
{
name: 'iPhone 14 Pro',
image: iphone14Pro // ✅ 使用导入的变量
},
{
name: 'Nike Air Jordan 1',
image: airJordan // ✅ 使用导入的变量
}
]
```
3. 优势
使用 import 导入静态资源的优势：
-
**资源处理**：Vite 会自动处理图片资源
-
**路径解析**：确保在开发和生产环境中都能正确加载
-
**自动优化**：
-
图片会被正确打包和优化
-
支持 tree-shaking（未使用的图片不会被打包）
-
生产环境中自动添加 hash，有利于缓存
- **类型安全**：可以获得 IDE 的路径补全和类型检查
4. 注意事项
-
确保图片文件放在正确的目录（通常是 `src/assets`）
-
图片文件名要与导入名称完全匹配（包括大小写和空格）
-
使用支持的图片格式（.jpg, .png, .webp 等）
-
如果需要动态路径，可以使用 Vite 的 `new URL()` 语法或 `@/assets` 别名