Laravel 10调用JavaScript函数提示‘未定义’的问题求助

针对你遇到的Uncaught ReferenceError: ShowAlert is not defined报错，以下是具体的排查和解决步骤：

1. 确认Vite服务状态与资源编译情况 #

• 开发环境下必须运行npm run dev，Vite依赖开发服务器动态编译资源，未启动服务会导致页面无法正确加载JS文件。
• 生产环境需先执行npm run build生成编译后的静态资源，再部署访问，否则无法加载到正确的打包文件。

2. 检查JS模块导入与全局挂载语法 #

• app.js中的导入可简化为import './mycode'（Vite会自动识别.js后缀），避免路径解析异常。
• 确保mycode.js的全局挂载无语法错误，格式化后的代码更易排查：

  window.ShowAlert = function() {
      alert("Hello world!");
  }
  

3. 调整资源加载时机或改用事件监听 #

• 当前@vite放在<head>中，JS会在DOM渲染前执行，虽挂载到window理论上可用，但可尝试将@vite移到<body>末尾，确保DOM完全渲染后再加载JS：

  <body>
      <!-- 页面所有内容 -->
      @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  </body>
  

• 推荐用事件监听替代onclick属性，避免时序问题，修改mycode.js：

  window.ShowAlert = function() {
      alert("Hello world!");
  }
  
  document.addEventListener('DOMContentLoaded', () => {
      const alertButton = document.querySelector('button[data-trigger-alert]');
      if (alertButton) {
          alertButton.addEventListener('click', ShowAlert);
      }
  });
  

  对应按钮改为：<button data-trigger-alert>Show alert</button>

4. 清除Vite与浏览器缓存 #

• 执行npm run dev -- --force重启Vite服务并强制清除缓存，确保资源更新。
• 用Ctrl+Shift+R强制刷新浏览器，加载最新的编译后资源。

5. 检查Vite配置文件 #

• 确认vite.config.js为Laravel默认配置，无自定义规则限制全局变量：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/sass/app.scss',
                  'resources/js/app.js',
              ],
              refresh: true,
          }),
      ],
  });
  

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