Laravel 9中Vite异步加载致脚本执行顺序异常，求最优解决方案

问题场景 #

在resources/js/目录下创建test.js，内容：

console.log('first');

在welcome.blade.php中编写代码：

<body>
  @vite(['resources/js/test.js'])
  <script type='text/javascript'>
    console.log('second');
  </script>
</body>

期望执行顺序为first → second，但实际输出为second → first。核心原因是@vite生成的脚本默认是type="module"类型，模块脚本会异步加载并延迟执行（优先完成HTML解析），而页面内的普通<script>会立即执行。

解决方案 #

方法1：将内联脚本改为模块类型并显式导入依赖 #

把内联脚本的type设为module，并导入test.js，Vite会自动保证依赖脚本先执行：

<body>
  <script type='module'>
    // 导入test.js，确保它先执行
    import '../resources/js/test.js';
    console.log('second');
  </script>
</body>

注：路径需根据页面实际位置调整，确保能正确指向test.js文件。

方法2：通过导出标记控制执行顺序 #

修改test.js，添加一个加载完成的导出标识：

console.log('first');
// 导出空对象作为加载完成标记
export const testLoaded = true;

页面内联脚本改为模块类型，导入标识后再执行逻辑：

<body>
  <script type='module'>
    import { testLoaded } from '../resources/js/test.js';
    // 此时test.js已执行完毕
    console.log('second');
  </script>
</body>

方法3：禁用Vite模块加载（仅适用于无需编译特性的场景） #

如果test.js不需要Vite的ES模块编译、热更新等特性，可以直接用普通脚本标签加载，放弃@vite指令：

<body>
  <script src="{{ asset('js/test.js') }}"></script>
  <script type='text/javascript'>
    console.log('second');
  </script>
</body>

注：需先执行npm run build将test.js编译到public/js目录下。

方法4：配置Vite输出非模块脚本 #

在vite.config.js中调整Rollup配置，将指定入口编译为普通立即执行函数（IIFE）而非模块：

export default {
  build: {
    rollupOptions: {
      input: {
        test: './resources/js/test.js',
      },
      output: {
        format: 'iife',
        entryFileNames: 'js/[name].js',
      },
    },
  },
};

编译后用普通脚本标签加载，即可保证从上到下顺序执行。

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