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'  // ❌ 生产环境中路径会失效

  }

]

```

这些路径的问题：

1. 相对路径 `../assets/` 在运行时可能找不到正确位置

2. 绝对路径 `/shopping-mall/src/assets/` 在打包后会失效

3. 不会被 Vite 正确处理和优化

4. 生产环境中可能出现 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 导入静态资源的优势：

1. **资源处理**：Vite 会自动处理图片资源

2. **路径解析**：确保在开发和生产环境中都能正确加载

3. **自动优化**：

   - 图片会被正确打包和优化

   - 支持 tree-shaking（未使用的图片不会被打包）

   - 生产环境中自动添加 hash，有利于缓存

4. **类型安全**：可以获得 IDE 的路径补全和类型检查

4. 注意事项

1. 确保图片文件放在正确的目录（通常是 `src/assets`）

2. 图片文件名要与导入名称完全匹配（包括大小写和空格）

3. 使用支持的图片格式（.jpg, .png, .webp 等）

4. 如果需要动态路径，可以使用 Vite 的 `new URL()` 语法或 `@/assets` 别名