m0_65904153 2022-07-22 16:36 采纳率: 50%
浏览 276
已结题

vue require 引入本地资源问题

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进行引入,还是说有其他可以做动态引入本地资源的方法

  • 写回答

2条回答 默认 最新

  • ggyyjavascript 2022-07-22 17:12
    关注

    原因:
    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');  // 目录 + 文件名 + 后缀
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 7月30日
  • 已采纳回答 7月22日
  • 创建了问题 7月22日

悬赏问题

  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方