Vue静态资源的动态访问

# 问题描述

在 Vue 项目中，静态资源在动态访问的情况下，会存在找不到资源的问题，这是因为 Vue 在打包时，会将静态资源打包到 dist 目录下。
而在动态访问静态资源时，vite 打包无法正确解析路径，导致找不到资源。

如，我们需要根据用户性别显示用户默认头像，此时需要动态访问静态资源，代码如下：

<img :src="path"/>

const gender = detail.value.gender
path.value = `@/assets/${gender}.png`

这时，会出现找不到资源的问题。

# 解决方案

# 使用 import 或者 require 直接引入资源

在 Vue 组件中，可以直接使用 import 或者 require 来引入静态资源，例如：

import boy from '@/assets/1.png'
import girl from '@/assets/2.png'

或者

const boy = require('@/assets/1.png')
const girl = require('@/assets/2.png')

path.value = gender === 1 ? boy : girl

这种方案可以正确解析路径，但是需要手动引入资源，当需要引入资源比较多时，还会增加代码量，比较麻烦。

# 使用 import 动态导入

在 Vue 组件中，可以使用 import 动态导入来引入静态资源，例如：

import(`@/assets/${gender}.png`).then((res) => {
    path.value = res.default
})

这种方案可以动态导入资源，但是会将 /assetsx 下的所有资源打包，并生成很多 js 资源，导致增加请求次数。

# URL 构造器

在 Vue 组件中，可以使用 URL 构造器来构造静态资源的 URL，例如：

const url = new URL('@/assets/logo.png', import.meta.url).href
path.value = url

这种方案较为完美，可以正确解析路径，并且不会增加请求次数。