vite+vue3+TypeScript中上传静态资源

最新推荐文章于 2024-09-22 09:29:29 发布

两岁小青年林

最新推荐文章于 2024-09-22 09:29:29 发布

阅读量351

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_44735189/article/details/129247125

版权

文章介绍了如何在Vue3项目中，利用Vite作为打包工具，通过`newURL`和`import.meta.url`来处理静态图片地址，将其存储在数组中，然后用for循环遍历数组，动态地将图片显示在页面上，解决了Vite环境下静态资源引入的问题。

摘要由CSDN通过智能技术生成

需求

就是将很多张图片的本地静态地址存在一个数组中，然后利用for循环遍历，让多张图片都显示到页面上

vue3中使用的是vite打包工具，不是webpack，所以静态资源引入的时候，不能使用require（）

使用new URL（'图片的本地地址',import.meta.url）.href

const SearchEngine = [
  {
    url: new URL('@/assets/img/ecosia.png', import.meta.url).href
  },
    {
    url: new URL('@/assets/img/Google.png', import.meta.url).href
  },
  {
    url: new URL('@/assets/img/greenCircle.png', import.meta.url).href
  },
]

这样做之后，静态资源就被引入了，静态资源变成了一个url地址。