报错：The "flash" tech is undefined

解决

方法一

手动删除video-flash的node_modules下的video.js包

方法二

vue.config.js

chainWebpack: (config) => {
    const rootModulesPath = path.resolve('node_modules');
    if (config.resolve.modules.store.has(rootModulesPath)) {
      config.resolve.modules.store.delete(rootModulesPath);
    }
    if (config.resolve.modules.store.has('node_modules')) {
      config.resolve.modules.store.delete('node_modules');
    }
    config.resolve.modules.store.add(rootModulesPath);
    config.resolve.modules.store.add('node_modules');
}

方法三

可以使用pnpm解决

但pnpm过于轻量，导致他有些包都没读到，或者说没下载到

需要手动
pnpm add video.js videojs-swf url-loader

ps：
videojs-swf url-loader这两个其实不用也能播放rtmp
因为我要读swf所以用到url-loader

image.png

下面是原因分析，可看可不看

发现问题

image.png

百度说是使用vue-video-player和video-flash时，video.js版本冲突报错
但我按步骤并未解决

image.png

vue-video-player是6.xx，他要的videojs在公用node_modules(以下称为公有)

video-flash装了7.xx，他有自己的node_modules（以下称为私有），没使用公有的

image.png

所以调整webpack解析modules顺序

默认是先查私有再到公有

所以需要调整先公有 再到 私有

修改resolve.moduels

以vue为例

百度方法不生效分析

使用configureWebpack修改，不生效

configureWebpack:{
  resolve: {
      modules: [path.resolve('node_modules'), 'node_modules'],
    },
}

由于有默认值，合并的会push到后面，会不生效

webpack读取modules顺序从索引0开始，是正序

但假如是使用原生webpack配置应该是可以的

image.png

所以，使用chainWebpack修改

chainWebpack: (config) => {
    const rootModulesPath = path.resolve('node_modules');
    if (config.resolve.modules.store.has(rootModulesPath)) {
      config.resolve.modules.store.delete(rootModulesPath);
    }
    if (config.resolve.modules.store.has('node_modules')) {
      config.resolve.modules.store.delete('node_modules');
    }
    config.resolve.modules.store.add(rootModulesPath);
    config.resolve.modules.store.add('node_modules');
}

image.png

config.resolve.modules.store是个Set对象

先移除原来的，再增加

直接增加不行的，因为已存在，要先clear

但是clear会清除全部，所以严谨点写了一堆代码

---

虽然成功解决了报错

但是我又遇到了这个

image.png

flash用不了，gg

百度了一下，要去下载安装老东西flash

https://www.flash.cn/
https://www.flash.cn/download-wins

有下载flash单独安装 和 下载他们的软件flash中心·两种方案

我单独下了flash，chrome没生效，就下了flash中心这个软件

装了flash中心，chrome还是提示不支持flash

flash中心本身有浏览器可以用，所以能看到效果

chrome这边就懒得理了，百度还说360浏览器可以，算了不折腾了

flash中心界面

flash中心界面

flash中心自带浏览器截图（调试工具都没！）

flash中心自带浏览器

本次记录就到这，我也要去继续摸索了