vue require 引入本地资源问题
this.player.start(
require("D:/Users/Desktop/ele/localDataDir/1658475904633/1658477490025.mp4")
);
let url = "D:/Users/Desktop/ele/localDataDir/1658475904633/1658477490025.mp4";
this.player.start(
require(url)
);
这两种写法有区别吗?为什么下面的引入报错,无法找到模块
现在打算做动态引入本地资源,本地资源路径已经拿到了,无法用require进行引入,还是说有其他可以做动态引入本地资源的方法
原因:
webpack本身是一个预编译路径 不能require纯变量的打包工具,无法预测未知变量路径
require(path) ,path 至少要有三部分组成, 目录,文件名和后缀
目录:webpack 才知道从哪里开始查找
后缀 文件后缀,必须要加上,不然会报错
文件名:可用变量表示
错误引用
上述意思即是不能通过以下这种方式加载图片,这种方式下,webpack找不到具体是哪个模块(图片)被引入,故而无法将图片hash并输出到dist文件下。
);
let imgUrlStr = '../images/a.png';
let imgUrl = require(imgUrlStr);
正确引用
鉴于require在纯变量的情况下找不到模块,所以我们至少要在require参数中写明一个目录(如下边代码中的example 2和example 3),这样的话,虽然不知道具体的模块,但是webpack也会为我们做些分析工作:
分析目录: ‘../images’
提取正则表达式 : ‘/^.*.png$/‘
但是此种情况下,webpack生成的上下文模块(context module)。它包含目录下的所有模块的引用,是通过一个 request 解析出来的正则表达式,去匹配目录下所有符合的模块,然后都 require 进来。此 context module 包含一个 map 对象,会把 request 中所有模块翻译成对应的模块 id。这意味着 webpack 能够支持动态地 require,但会导致所有可能用到的模块都包含在 bundle 中。
let imgName = 'a';
let imgAllName = 'a.png';
// example 1
let imgUrl = require('../images/a.png'); // 纯字符串
// example 2
let imgUrl = require('../images/' + imgAllName); // 目录 + 文件全名
// example 3
let imgUrl = require('../images/' + imgName + '.png'); // 目录 + 文件名 + 后缀
下面的不行 可以试试 。下面的 没看出 啥问题
let url = require("D:/Users/Desktop/ele/localDataDir/1658475904633/1658477490025.mp4");
this.player.start(
url
);
上面的可以引入成功? 你这个都是 绝对路径。一般都是相对路径