Vue3+Vuetify项目@别名路径失效及配置咨询

问题原因 #

模板中直接写 <img src="@/assets/more-btn.svg"> 时，打包工具（Webpack/Vite）不会解析静态属性里的@别名，导致浏览器直接请求@/assets/xxx路径，返回404。只有JS上下文（如:src绑定的表达式）或特定loader/plugins才会处理别名解析。

分项目类型配置方案 #

1. Vue CLI 创建的 Vue3 项目 #

Vue CLI 默认已配置@指向src，但需要添加html-loader来解析模板中img的src属性：

1. 项目根目录创建/修改 vue.config.js：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  chainWebpack: config => {
    // 配置html-loader解析模板中的img src属性
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
      .options({
        esModule: false,
        sources: {
          list: [
            {
              tag: 'img',
              attribute: 'src',
              type: 'src'
            }
          ]
        }
      })
  }
})

2. 重启开发服务器，此时<img src="@/assets/more-btn.svg">会被正确解析为打包后的哈希路径。

2. Vite 创建的 Vue3 项目 #

Vite 默认支持@别名，但模板静态属性不会自动解析，需借助插件处理：

1. 安装模板别名解析插件：

npm install vite-plugin-vue-template-alias --save-dev

2. 修改 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueTemplateAlias from 'vite-plugin-vue-template-alias'

export default defineConfig({
  plugins: [
    vue(),
    // 配置模板别名解析
    vueTemplateAlias({
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

3. 重启开发服务器，静态src属性中的@即可被正确解析。

替代方案（无需配置） #

如果不想修改配置，可始终使用绑定属性，Vite 推荐用import.meta.url替代require：

<!-- Vue CLI/Webpack 环境 -->
<img :src="require('@/assets/more-btn.svg')" alt="" />

<!-- Vite 环境 -->
<img :src="new URL('@/assets/more-btn.svg', import.meta.url).href" alt="" />

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