网络打包资源

首先，我们需要了解webpack如何处理静态资源。在*。vue组件，所有的模板和css都会被vue-html-loader和css-loader解析，找到资源的URL。

例如，img src='http:/logo.png '，background:url(。/logo.png)，'。“/logo.png”都是相对资源路径，将由Webpack解析为模块依赖关系。

由于logo.png不是JavaScript，当它被视为模块依赖时，我们需要使用url加载器和文件加载器来处理它。这些加载器已经在这个模板中配置好了，所以您可以使用相对/模块路径，而不用担心部署。

由于这些资源在构建过程中可能会被内联/复制/重命名，因此它们本质上是源代码的一部分。这就是为什么我们建议将webpack处理的静态资源像其他源文件一样放在/src路径下。

事实上，您甚至不需要将它们都放在/src/assets路径下：您可以基于模块/组件的使用来组织文件结构。例如，您可以将每个组件及其静态资源放在自己的目录中。

资源处理规则

相对于URL，/assets/logo.png将被解释为模块依赖项。它们将被根据您的网络包输出配置自动生成的网址所取代。

如果没有前缀URL，assets/logo.png将被视为相对URL并转换为。//资产/logo.png。

前缀为~的URL将被视为模块请求，类似于require('some-module/image.png ')。如果要使用Webpack的模块来处理配置，可以使用这个前缀。例如，如果您有资产的路径解析，则需要使用img src=' http : ~ assets/logo . png '来确保解析是对应的。

相对于根目录URL的URL，/assets/logo.png不会被处理。

测试摘要：

1.采用相对路径，程序编写的样式和图片一般放在assets文件夹下。

要介绍top.vue中的图片资产/图片/home/photo.png，可以这样写img。

Img src=' http:/./assets/images/home/photo . png '/由本地dev渲染后的图像路径：(打包在静态文件夹中的img下)

建立项目后，打开图片路径：(静态文件夹的相对路径)

2.使用webpack中的别名设置路径别名。

可以在top.vue中调用如下：(图片放在静态/图片/主文件夹中)

img src=' http : ~ images/home/logo . png '/项目开发完成后，还会编译成：

个人认为第一种更直观。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。