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模板工程中静态资源引入的小坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！