900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue 项目引用static目录资源_详解vue中静态资源的路径问题(深度好文)

vue 项目引用static目录资源_详解vue中静态资源的路径问题(深度好文)

时间:2021-12-04 23:55:49

相关推荐

vue 项目引用static目录资源_详解vue中静态资源的路径问题(深度好文)

前言: webpack中的require解析

首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中的require都属于webpack的解析范畴。

开始前,咱们先聊聊webpack中require的用法。

您可能觉得这有什么,不就是直接require(url)直接引用吗,如果您这么想,那可就太小看require了。

let url = "@/assets/images/carousel/logo.svg"

require(url) //报错

let url = "logo.svg"

require("@/assets/images/carousel/"+url); //正确

很诡异是不是? 我相信你第一次见到后会不自觉的说句f**k。

这是因为你修改页面后,webpack进行编译,等待编译完,需要进行工程的打包,然后打包正确,才能热加载运行并刷新页面。

如果require中传入的是个变量,它有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍(它很傻)。所以至少需要给出在哪个路径下,这样才能精确的将那个路径下的对应文件打包,然后在代码运行时,直接用对应文件名生成正则匹配(因为打包后的文件,可能有hash值。不能直接查文件名),找到后,加载到代码中。

所以,请记住 尽可能详细的指定require中的路径,然后拼接变量

接下来说下打包后的路径问题

webpack将

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。