问题
Electron+vite+vue3对接海康威视摄像头,实现多摄像头回放,通过iframe嵌入html
文件,html
文件中使用了script
引入的js存在require
导致引入失败。或打包后找不到文件
解决办法
将html
和要引入的commonjs
都放在public
文件夹下
目录结构:
public
├──html
├── plugin.html(嵌入的文件)
├──js
├── commonjs.js
// plugin.html
<script id="videonode" src="../js/webVideoCtrl.js"></script>
<script id="videonode" src="../js/jquery-1.7.1.min.js"></script>
<script id="videonode" src="../js/jsVideoPlugin-1.0.0.min.js"></script>
探索过程
引入本地的commonjs
文件都是要放在public
文件夹下
最开始的plugin.html
是放在最外层的
public
├──js
├── commonjs.js
index.html
plugin.html
这样会出现两个问题:
commonjs
引入的方式有可能失败,对路径有些要求- 引入成功,但是打包后不能获取正确的文件路径
vite打包后public
文件夹下会自动出现一个assets
文件, <script id="videonode" src="../js/webVideoCtrl.js"></script>
就会出现找不到...assets/js/webVideoCtrl.js
这种错误
但是文件的真实情况如下:
因为是在Electron环境下,主线程里使用了node和require,package.json
中的type不能更改为module