Vue中的assets和static目录：使用场景及区别解析
warning:
这篇文章距离上次修改已过436天，其中的内容可能已经有所变动。
在Vue.js项目中，assets和static目录有着不同的用途和应用场景。
assets目录:
- 存放项目中需要用到的静态资源，例如图片、字体等。
- 在构建过程中会被webpack处理，例如可以利用
url-loader和file-loader将资源作为模块来处理，可以优化加载性能。 - 资源会被webpack打包到相应的chunk中，可以进行分模块加载。
- 资源路径默认是相对
src的，所以在模板中引用时不需要../。
static目录:
- 也用于存放静态资源，但是这些资源不会被webpack处理，即不会参与构建过程。
- 这些资源会被直接复制到构建的文件目录（通常是
dist）中，所以在static中的资源引用时需要加上../。 - 如果需要在代码中动态引用这些资源（比如通过AJAX请求获取资源），需要使用绝对路径。
举例:
假设在assets目录下有一张图片logo.png，在static目录下也有一张图片favicon.ico。
<!-- 在模板中引用assets目录下的图片 -->
<img src="logo.png">
<!-- 在模板中引用static目录下的图片 -->
<img src="/favicon.ico">在logo.png的引用中，我们不需要写相对路径，因为webpack会处理这个资源并重写路径。而favicon.ico是直接复制到构建目录的，所以在引用时需要写成绝对路径。
评论已关闭