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中的路径，然后拼接变量

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