Laravel中Vite生成重复样式脚本链接及错误标签问题求助

问题场景 #

我在Laravel Blade模板中使用@vite(['resources/css/app.css', 'resources/js/app.js'])引入前端资源，但查看浏览器页面源码时，发现资源标签看起来“重复”，且JS被用<link>标签引入：

<link rel="preload" as="style" href="http://localhost:8014/build/assets/app-0a7f7e13.css"/>
<link rel="modulepreload" href="http://localhost:8014/build/assets/app-498a8caa.js"/>

<link rel="stylesheet" href="http://localhost:8014/build/assets/app-0a7f7e13.css"/>
<script type="module" src="http://localhost:8014/build/assets/app-498a8caa.js"></script>

当前vite.config.js配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

关键说明 #

首先明确：<link rel="modulepreload">是标准的JS模块预加载机制，不是错误；CSS的preload标签同理，都是Vite默认的性能优化手段——预加载标签会提前请求资源到缓存，后续实际加载标签（<link rel="stylesheet">/<script>）会直接使用缓存，不会发起重复请求。

解决选项 #

如果你确实不需要预加载优化，或者确认存在真正的重复加载（比如浏览器网络请求显示两次资源），可以按以下步骤处理：

• 排查重复调用@vite指令
  检查所有Blade模板（包括父布局、嵌套组件、include文件），确保没有多次调用@vite指令，这是最常见的重复输出原因。

• 禁用预加载标签
  在vite.config.js的Laravel插件配置中添加preload: false，关闭预加载优化：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/css/app.css',
                  'resources/js/app.js',
              ],
              refresh: true,
              preload: false, // 关闭预加载标签生成
          }),
      ],
  });
  

• 清除缓存并重启服务

  • 清理Laravel视图和缓存：

    php artisan view:clear
    php artisan cache:clear
    

  • 停止当前Vite开发服务器，重新启动npm run dev
  • 清除浏览器缓存或用无痕模式测试页面

• 排查第三方插件干扰
  如果项目中安装了其他Vite插件，检查是否有插件修改了资源输出逻辑，导致标签重复。

内容的提问来源于stack exchange，提问作者Ahmad Badpey