Vue 3中使用UI框架时，无需@符号如何引用本地资源？

问题核心：原生<img>的src会被Vue模板编译器自动解析路径别名，但UI框架的自定义组件（如Element Plus的<el-image>）的src是作为prop传递，不会自动处理别名，导致路径失效。

以下是几种可行的解决方案：

1. 先确认Vite的路径别名配置正确 #

确保你的vite.config.js（或vite.config.ts）里已经正确配置了@的别名：

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')
    }
  }
})

如果使用TypeScript，还需在tsconfig.json中补充路径配置（避免编辑器报错）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2. 导入图片资源后绑定到组件prop #

通过ES模块导入图片，将导入的变量直接绑定到UI组件的src属性：

<template>
  <el-image :src="picture" />
</template>

<script setup>
// 直接导入图片资源
import picture from '@/assets/picture.jpg'
</script>

3. 使用Vite的new URL()动态解析路径 #

无需提前导入，直接在模板中用new URL()结合import.meta.url解析路径，Vite会在构建时自动处理：

<template>
  <el-image :src="new URL('@/assets/picture.jpg', import.meta.url).href" />
</template>

4. 封装工具函数批量处理（可选） #

如果需要频繁处理这类路径，可以封装一个工具函数：

// src/utils/asset.js
export const getAssetUrl = (assetPath) => {
  // 替换@/为相对路径前缀，适配Vite的URL解析
  const relativePath = assetPath.replace('@/', '')
  return new URL(`../${relativePath}`, import.meta.url).href
}

在组件中使用：

<template>
  <el-image :src="getAssetUrl('@/assets/picture.jpg')" />
</template>

<script setup>
import { getAssetUrl } from '@/utils/asset'
</script>

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