北京移动端网站优化,网站的主要内容,优秀网站推广方案,广西壮族自治区绕口令方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite)
1.图片放到public 目录会更省事#xff0c;不管是开发环境还是生产环境#xff0c;可以始终以根目录保持图片路径的一致.
假设#xff1a; 静态文件目录#xff1a;src/assets/images/ 我们的目标静态文件在 …方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite)
1.图片放到public 目录会更省事不管是开发环境还是生产环境可以始终以根目录保持图片路径的一致.
假设 静态文件目录src/assets/images/ 我们的目标静态文件在 src/assets/images/home/icon.png img :srcrequire(/assets/images/home/icon.png) /
试require动态引入 发现报错require is not defind这是因为 require 是属于 Webpack 的方法方法1适用于处理单个链接的资源文件
import homeIcon from /assets/images/home/icon.pngimg :srchomeIcon / 方法2适用于处理多个链接的资源文件推荐这种方式传入的变量可以动态传入文件路径
静态资源处理 | Vite 官方中文文档
new URL() import.meta.url
这里我们假设
工具文件目录 src/util/pub-use.ts
pub-use.ts// 获取assets静态资源
export default const getAssetsFile (url: string) {return new URL(../assets/images/${url}, import.meta.url).href
}
使用
import usePub from /util/public-use
setup () {const Pub usePub()const getAssetsFile Pub.getAssetsFilereturn { getAssetsFile }
} 可以包含文件路径
img :srcgetAssetsFile(/home/icon.png) / 方法3适用于处理多个链接的资源文件不推荐这种方式引入的文件必须指定到具体文件夹路径传入的变量中只能为文件名不能包含文件路径使用vite的import.meta.glob或import.meta.globEager两者的区别是前者懒加载资源后者直接引入。
这里我们假设
工具文件目录 src/util/pub-use.ts
pub-use.ts// 获取assets静态资源
export default const getAssetsHomeFile (url: string) {const path ../assets/images/home/${url};const modules import.meta.globEager(../assets/images/home/*);return modules[path].default;
}
使用
import usePub from /util/public-use
setup () {const Pub usePub()const getAssetsHomeFile Pub.getAssetsHomeFile return { getAssetsHomeFile }
} 不能包含文件路径
img :srcgetAssetsHomeFile(icon.png) /
补充如果是背景图片引入的方式一定要使用相对路径
.imgText {background-image: url(../../assets/images/1462466500644.jpg);
}
生产环境会自动加上hash并且路径正确使用绝对路径在开发环境能够正常显示但将导致打包后的路径不正确
