Javascript

vue模板工程中静态资源引入的小坑

本文主要是介绍vue模板工程中静态资源引入的小坑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

需求:

同类型静态图片放在了/src/assets/imgs下面,要在js代码中引入这些图片资源。

已知vue代码采取ES Module规范,理论上应该避免使用commonjs的东西,所以第一反应不用require()而是使用import(),发现报错,大致是对应的位置没有模块导出。

为什么?

vue模板工程中引入静态资源,是使用webpack打包后显示到页面上的。虽然vue的js部分采用ES Module规范,但webpack采用的是commonJS规范,使用import(),会被当成模块依赖,而不是静态资源。

require的问题是:

 

require("@/assets/images/logo.png") 可用

let url = "@/assets/images/logo.png";

require(url); 报错

let url = "logo.png";

require("@/assets/images/" + url); 可用

这是为什么?

两个问题:

1. require()不能整个使用变量,这会让它找不到对应的目录,开启全文件系统的搜索;

2. 打开调试工具,如下图,发现webpack在打包/src/asset文件夹内的资源时,会把引入的图片名加一个随机的值,复制到打包后的文件夹。这就导致单纯搜索logo.png无法搜到对应的图片。

 

 

那为什么使用"@/assets/images"+url的形式,不会导致这个错误呢?因为等于是告诉webpack,前面是要找的目录,后面的url是需要匹配的正则。

经过尝试,无论是"@/"+url,还是"@/assets"+url,只要给require一个目录,就能正确找到资源位置。但是"@"+url不行。

 

参考资料:

https://juejin.cn/post/7009099569849958414

https://segmentfault.com/a/1190000018472635

 

这篇关于vue模板工程中静态资源引入的小坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!