Vue3/Vuetify3/Vue-CLI/TS项目App.vue引用assets资源404问题

问题现象 #

使用Vuetify 3.0.4 Beta版本开发时，存放在src/assets目录下的图片执行build操作后不会被打包进构建产物，项目目录结构如下：

root
├─ dist
├─ public
└─ src
   ├─ assets
   │  └─ logo.png
   ├─ views
   ├─ components
   ├─ App.vue
   └─ main.ts

具体表现：

• 在src/views目录下的视图文件中，通过相对路径<v-img src="../assets/logo.png" />引用资源时，资源可以正常被打包进bundle，访问无异常
• 在App.vue中引用同路径资源时持续返回404错误，尝试过@assets/logo.png、@/assets/logo.png两种别名写法均无效，控制台无assets资源处理日志，开发环境报错信息如下：

GET http://localhost:8080/assets/images/application-title.png 404 (Not Found)

• 执行build构建后检查产物源码，找不到对应被打包引入的资源

项目环境 #

• 脚手架版本：@vue/cli 5.0.6
• Vue版本：3.x
• 项目搭建流程：

# 创建Vue3+TS项目
vue create client
# 配置选择
Vue CLI v5.0.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

# 加装Vuetify3
cd "client"
vue add vuetify
? Choose a preset: Vuetify 3 Preview (Vuetify 3)
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) No

问题原因 #

本质是Vuetify 3 Beta版本的v-img组件对静态字符串路径的解析逻辑存在兼容问题：在子路由/业务组件中写的相对路径会被vue-loader自动识别加入webpack依赖树，因此可以正常打包；但在根组件App.vue中直接写静态字符串路径时，路径不会被webpack识别，构建时直接忽略对应资源，最终导致404。

解决方案 #

方案1：显式import引入资源（最稳定，推荐） #

在script标签中显式引入资源，让webpack明确将资源加入依赖树，处理后绑定到v-img的src属性上即可。
组合式API（script setup）写法：

<template>
  <v-img :src="logoPath" />
</template>

<script setup lang="ts">
import logoPath from '@/assets/logo.png'
</script>

选项式API写法：

<template>
  <v-img :src="logoPath" />
</template>

<script lang="ts">
import logoPath from '@/assets/logo.png'
export default {
  data() {
    return {
      logoPath
    }
  }
}
</script>

方案2：使用require动态引入 #

如果不想单独写import语句，可以在模板中通过require包裹资源路径，强制webpack解析资源。
注意：src前必须加:（v-bind绑定），否则引号内内容会被当做普通字符串处理，不会执行require逻辑

<template>
  <v-img :src="require('@/assets/logo.png')" />
</template>

如果使用该方法时报别名找不到的错误，先在项目根目录的vue.config.js中确认别名配置正确：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
})

方案3：无需构建处理的资源放public目录 #

如果资源不需要webpack做哈希命名、压缩等处理，可以直接把图片放到public目录下，引用时写根路径即可，该路径不会走webpack解析逻辑，不会出现路径识别问题：

• 将logo.png移动到public/images/logo.png
• 引用写法：<v-img src="/images/logo.png" />

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