Vite+Laravel10项目中console.log与alert无法正常工作求助

核心前提：确认JS文件是否被页面加载 #

如果app.js未被正确引入页面，所有代码都不会执行，这是最常见的根源：

• 打开项目的Blade模板（如resources/views/layouts/app.blade.php），确认存在Vite资源注入指令：

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  

• 打开浏览器控制台的Network标签，刷新页面后搜索app.js：
  • 无相关请求：说明模板未引入资源；
  • 出现404：检查Vite配置的input列表是否包含app.js；
  • 请求pending：排查WSL端口映射或Vite服务器配置问题。

逐个排查问题点 #

1. 修正WSL环境下的Vite服务器配置 #

WSL存在本地端口访问限制，可能导致Vite资源无法加载：

• 在项目根目录的.env文件中添加：

  VITE_HOST=0.0.0.0
  VITE_PORT=5173
  

• 重启npm run dev，访问项目时使用WSL的IP地址（终端执行ip addr show eth0查看），而非localhost。

2. 检查Vite配置文件有效性 #

确认vite.config.js的input数组包含app.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'], // 必须包含目标JS文件
            refresh: true,
        }),
    ],
});

修改后重启npm run dev。

3. 排查模块加载中断问题 #

若bootstrap.js存在语法错误或依赖问题，会导致整个app.js模块加载失败：

• 暂时注释import "./bootstrap";，仅保留测试代码：

  alert("hi");
  console.log("hi");
  

• 刷新页面，若alert和日志正常显示，说明bootstrap.js存在问题，逐步排查其中代码。

4. 清除缓存 #

• 清除Laravel缓存：

  php artisan optimize:clear
  

• 强制刷新浏览器（Ctrl+Shift+R），避免加载旧缓存资源。

5. 确认Vite开发服务器状态 #

查看npm run dev的终端输出：

• 若出现Module not found等报错，按提示安装依赖或修正文件路径；
• 显示ready in X ms则说明服务器正常运行。

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