Vue Nuxt Assets 下文件动态引入问题

2024 年 04 月 15 日

562 次浏览

921字数

# 问题

nuxt的[官方文档](https://nuxt.com/docs/getting-started/assets)的静态文件引用方法

![文件在pulic下的写法](https://i.imgur.com/mhYjvlx.png)

![文件在assets下的写法](https://i.imgur.com/3FS7Ap2.png)

但是实际上在Vue中，当文件在assets下时这样写是有问题的

```vue
<v-img src="~/assets/icon/question.svg" />
```

这个时候的请求路径是

![image-20240415223137859](https://i.imgur.com/pBJ6TGE.png)

可以发现我们配置的别名(`@`或`~`)并没有被正确解析

再来看下正常的assets文件应该在哪个路径访问，这是我放在assets下的字体文件

![文件位置](https://i.imgur.com/TW3khyt.png)

![访问路径](https://i.imgur.com/FlD3wW4.png)

所以访问路径是`http://domain:port/_nuxt/assets/...`

# 解决方法

所以第一个解决方法你肯定想到

```vue
<v-img src="/_nuxt/assets/icon/question.svg" />
```

但如果这么解决那这个帖子也不用写了

---

注意：我们的别名是在打包工具上配置的，`vue`不认的话，`js`肯定认啊，那我们直接在`js`中拿到地址就行了

所以参考这个[帖子](https://stackoverflow.com/questions/66419471/vue-3-vite-dynamic-image-src)

**解决方法**

```vue
<template>
	...
	<v-img :src="imageUrl" />
	...
</template>

或者如果你使用的是nuxt，直接将静态文件放入public目录下，根据官方文档使用即可

最后修改：2024 年 04 月 15 日

如果觉得我的文章对你有用，请随意赞赏