Vue项目中使用"/src/assets/"这样的绝对路径在开发环境中正常,但在生产环境打包后会失效,这是因为打包后的文件结构与开发环境不同。
解决方案:
- 使用
@
别名: 将路径改为使用@
别名,@一般指向src
目录:
icon: "@/assets/svg/home.svg",
- 使用
import
导入图片: 将图片作为模块导入,推荐使用此方式:
import homeIcon from "@/assets/svg/home.svg";
-
使用
public
文件夹: 将图片放在public
文件夹下,然后使用绝对路径:icon: "/img/svg/home.svg",