使用Laravel Mix配置别名导入Video.js时模块解析失败问题咨询

两个配置错位导致所有操作失效：

• 你写在Blade视图里的<script type="module">代码，是直接被浏览器原生解析执行的，完全没有经过Webpack/Laravel Mix的打包流程。Webpack配置的路径别名、模块解析规则，只对纳入打包范围的项目源文件（比如resources目录下的JS文件）生效，根本碰不到浏览器端直接运行的脚本——浏览器会严格按原生ES模块规则解析导入路径，识别不出无相对路径的"videojs"模块名，自然抛出对应的解析错误。
• 手动把videojs别名指向video.min.js的配置本身存在缺陷：绕过了video.js包本身的标准入口逻辑，容易导致全局变量缺失、代码加载顺序异常，后续即使路径解析通了，也会出现调用时报错的问题。

1. 修正webpack.mix.js配置 #

完全移除之前自定义的videojs别名配置，Laravel Mix默认已经内置了node_modules目录的模块解析能力，不需要手动指定文件路径指向压缩包。
修正后的基础配置参考：

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css');

2. 在项目入口JS文件中导入Video.js #

打开Mix的入口源文件resources/js/app.js，在文件顶部添加导入逻辑：

// 导入Video.js核心库
import videojs from 'video.js';
// 导入Video.js默认样式，避免播放器控件错乱
import 'video.js/dist/video-js.css';

// 将videojs挂载到全局对象，供视图中的脚本直接调用
window.videojs = videojs;

3. 重新执行打包命令 #

运行npm run dev，等待打包流程完成，确认public目录下生成的编译JS、CSS文件已经包含Video.js的相关代码。

4. 调整Blade视图代码 #

删除之前写在视图里的原生模块导入代码，替换为引入打包后的静态资源，再完成播放器初始化：

{{-- 引入编译后的全局静态资源 --}}
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

{{-- 播放器DOM结构 --}}
<video id="my-player" class="video-js vjs-default-skin" controls preload="auto">
  <source src="你的视频播放地址.mp4" type="video/mp4">
</video>

{{-- 初始化脚本，不需要再写import语句 --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const player = videojs('my-player');
    });
</script>

• 不要直接在Blade视图里写import 'xxx'的原生模块代码，所有npm安装的第三方依赖，都必须通过Mix入口源文件导入、打包后，再在视图中引入编译后的产物，否则Webpack的所有配置都不会生效。
• 不要跳过Video.js的样式导入，否则会出现播放器控件无法显示、布局错乱的问题。
• 不要手动把别名指向压缩版的JS文件，否则会导致包体冗余、全局变量加载顺序异常等隐性问题。

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