vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题
一、静态文件放public下
很多小伙伴会将图片放到assets文件夹,例如:src/assets/images/,我们在文件夹里面放入一张图片名称叫做:arrow.png 所以文件里面就是这样子 src/assets/images/arrow.png
<img :src="require('@/assets/images/arrow.png')" />
尝试过require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法\
二、(适用于处理单个链接的资源文件)
import arrow from '@/assets/images/arrow.png' <img :src="arrow" />
三、(适用于处理多个链接的资源文件)
Vite官方文档处理图片链接https://cn.vitejs.dev/guide/assets#new-url-url-import-meta-url
new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:
js
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
这在现代浏览器中能够原生使用 - 实际上,Vite 并不需要在开发阶段处理这些代码!
这个模式同样还可以通过字符串模板支持动态 URL:
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}
在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而,这个 URL 字符串必须是静态的,这样才好分析。否则代码将被原样保留、因而在 build.target
不支持 import.meta.url
时会导致运行时错误。
js
// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href
注意:无法在 SSR 中使用
如果你正在以服务端渲染模式使用 Vite 则此模式不支持,因为 import.meta.url
在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。
具体的使用方法:
首先在utils 里面创建一个自己的方法:getUrls.ts
//getUrl.ts
// 获取assets静态资源
export const getAssetsFile = (urlName: string) => {
console.info("====", urlName);
console.info("url", import.meta.url);
console.info("url2", new URL(`../../assets/${urlName}`, import.meta.url));
return new URL(`./assets/${urlName}`, import.meta.url).href;
};
然后看一眼文件夹的路径
具体使用:
import { getAssetsFile } from "@/utils/imageUrl/getUrl";
然后链接路径进行替换就好。