Vue 项目中请求静态资源

YuanShan
2,560 阅读5分钟

本文是自己总结用的，大家可以当做参考，但是由于自己的水平有限，文档中一定会存在不合理的或者错误的地方，请大家见谅，友好观看。

如果您对某个地方有疑问，或者有更好的见解可以在评论区提出来，大家一起进步，非常感谢！

一、public 和 assets

1.1 public文件夹

  • public文件夹中的内容在打包的时候，会被原封不动的移动到dist目录中

1.2 Assets文件夹

  • assets文件夹中被使用到的资源(没有被使用到的文件并不会被放进dist文件夹中)在打包时，会被 webpack 处理。
  • 经过webpack 处理过的资源都会被加上哈希的文件名后缀，这是为了更好的应对浏览器的缓存

1.png

图片打包后.png

二、相对路径和绝对路径的处理

URL转换规则
如果URL是一个绝对路径（例如 /images/foo.png），它将会被保留不变
如果URL是以 `.` 开头，它会作为一个请求模块被解释并基于你的文件系统中的目录结构进行解析

2.1 使用绝对路径

当我们想要使用public文件夹中的资源时，可以使用绝对路径的形式来请求资源。Vue在识别路径时发现是一个绝对路径，URL会被直接的保存下来放到img的src属性下。代码更改之后，Vue热更新将最新的dist文件交给浏览器去识别。浏览器在解析img DOM时，直接去请求img/aaa.jpg.。

<!-- 打包前 -->
<img src="img/aaa.jpg">
<!-- 打包后 -->
<img src="img/aaa.jpg">

因为public文件夹中的内容会被原封不动的添加到dist 文件夹中，所以可以正确的请求到图片资源。

图片打包前结构.png

图片打包后结构.png

2.2 使用相对路径

我们想要使用assets 文件夹中的内容时，需要使用相对路径的形式来请求资源。Vue在识别路径时发现是一个相对路径，会路径进行解析。 官方文档的解释：

如果URL是以 . 开头，它会作为一个请求模块被解释并基于你的文件系统中的目录结构进行解析

<!-- 打包前 -->
<img src="../../assets/img/home/recommend_bg.jpg">
<!-- 打包后 -->
<img src="/img/recommend_bg.a1646d5d.jpg">

我们写代码的时候我们在引用文件的时候开发者所关注的目录结构是编辑器打开的这个项目文件夹。但是浏览器在识别代码时，浏览器识别的是打包后的dist文件夹。在我们使用相对路径来引入资源时，如果Vue没有对路径做处理，而是直接交付给浏览器，那么浏览器一定找不到对应的文件。所以Vue在将这部分结构打包到dist文件夹之前一定是做了一些处理，让浏览器能正确的找到资源。

相对路径的处理.png

Vue 所做的处理就是针对相对路径调用了一次require函数。 node使用的是CommonJS规范，require 语句作为 node 规范下的模块导入函数。平时在项目中使用比较多的 import … from … 是ES6的模块规范。

// Vue 中手动使用 require
return {
  url: require("../../assets/img/home/recommend_bg.jpg")
}

// 最终打印的值
url: "/img/recommend_bg.a1646d5d.jpg"

官方推荐：使用相对路径的形式来导入资源

请注意，我们建议将资产作为模块依赖关系图的一部分导入，以便它们通过 Webpack 并具有以下好处 脚本样式表被缩小并捆绑在一起，以避免额外的网络请求 缺少文件会导致编译报错，而不是为您的用户带来 404 错误 结果文件名包含内容哈希，因此您无需担心浏览器缓存其旧版本

2.3 何时使用public文件夹

您需要在构建输出中具有特定名称的文件 您有数千张图片，并需要动态引用它们的路径 某些库可能与 Webpack 不兼容，您别无选择，只能将其作为 <script> 标签包含在内

三、使用axios来请求本地数据

平时在自己mock数据的时候发现的问题。自己写的本地JSON文件在使用axios和fetch进行请求时，必须放在public文件夹下，并且使用绝对路径来请求。 在使用相对路径进行请求时，发现会找不到资源并且路径并没有经过require语句进行处理。

相对路径引入的官方说明.png

官方文档只是明确说明这这三种情况下Vue会对相对路径进行处理。个人猜测是Vue不会对Axios中的相对路径进行处理。所以以后出现这种请求资源找不到的时候，可以先去浏览器看一下请求的路径，如果发现是因为没有被 Vue 处理而找不到文件的话，可以尝试使用require 语句来手动处理一下。

四、Require()函数

  1. CommonJS规范是同步的加载，会出现浏览器假死的状态，因为是同步的加载，所以完全可以当做同步代码来使用
const url = require("../../assets/data.json")
// 控制台打印结果
{
  name: "foo",
  age; 18
}
  1. 加载JSON等数据时，返回值就是得到的数据。加载图片等资源时，返回值是一个处理过的路径。
const url = require("../../assets/img/home/recommend_bg.jpg")
// 打印的结果
'/img/recommend_bg.a1646d5d.jpg'
  1. Require中只能填写相对路径

想要在require中填写 绝对路径的方式来访问 public 文件夹中的内容是行不通的 个人理解如下。

  • Require是 node 提供的api。浏览器是不会识别require语句的。所以在打包 dist 完成之前。Require语句就被执行了，得到了处理过后的字符串。在打包完成之前当前的文件结构就是我们开发者创建的项目。
  • Require会基于这个来识别路径；。所以使用绝对路径来访问public中的文件是行不通的。
  • 这个现象和axios中只能使用绝对路径也是类似的。识别axios中的路径这一步是在浏览器的环境下执行的，浏览器得到的是dist文件夹，所以在axios中也只能通过绝对路径的形式
avatar
文章
阅读
粉丝