Laravel Vite构建图片在Blade模板的引用及引入方式差异

1. Blade模板中引用Vite配置入口里的图片（如icon-lock.svg） #

有两种常用实现方式：

• 通过JS导入后在视图使用
  在入口JS文件（比如app.js）中导入图片并挂载到全局：

  import lockIcon from './images/icon-lock.svg';
  window.lockIcon = lockIcon;
  

  随后在Blade模板中直接引用该全局变量：

  <img src="{{ $lockIcon }}" alt="Lock Icon">
  

• 使用Laravel Vite辅助函数
  若图片存放在resources目录下（如resources/images/icon-lock.svg），直接用Vite::asset()生成带版本哈希的资源路径：

  <img src="{{ Vite::asset('resources/images/icon-lock.svg') }}" alt="Lock Icon">
  

  该方法会自动适配Vite打包配置，无需额外导入JS即可输出处理后的资源地址。

2. 图片作为入口点 vs 在app.js中导入的区别 #

• 图片作为独立入口点
  当你在vite.config.js的build.rollupOptions.input里把图片设为单独入口时，Vite会将其视为独立构建单元。由于图片不是JS模块，Rollup打包时会生成一个空的JS chunk（每个入口必须对应一个输出文件），同时图片会被添加版本哈希后单独输出到打包目录。这种方式适合完全独立于JS的资源，但会产生冗余的空JS文件。
• 在app.js中导入图片
  这种方式下，图片是app.js模块的依赖资源，Vite会将其纳入app.js的构建图谱中。打包时不会生成额外的空JS chunk，图片的哈希路径会被注入到JS代码中，最终和app.js的打包结果关联。这种方式更高效，无冗余文件，适合和JS逻辑关联或需要通过JS变量引用的资源。

内容的提问来源于stack exchange，提问作者Pranab V V