IOS美区账号微信: springsunshine2017

前端技术 · 2020年10月19日 10

三个场景全面了解vue中assets和static目录的区别

今天群里有个小伙伴问了这样的一个问题,vue中动态给img赋值,路径怎么写?相对路径和绝对路径都找不到。作为过来人,立马想到的就是,他可能没有搞懂vue中assets和static目录的区别。

在vue的目录结构中,static是静态资源目录,可以用于放置图片、字体等。而在src目录(开发目录)下,同样提供了一个assets目录,可以用于存放图片,比如logo等。虽然这两个目录都可以用于放置图片,但是在使用上却是有一些差别的。

场景一:在HTML中使用的区别

在HTML中使用,两者都可以直接使用路径来访问。

<img src="../assets/liuyanla.png" alt="liuyanla" title="assets和static目录的区别">
<img src="/static/liuyanla.png" alt="liuyanla" title="assets和static目录的区别">

要注意的是,访问assets目录下的资源文件使用的是相对路径,而访问static目录下的资源文件则需要使用绝对路径,具体原因在后面说。

场景二:在JS使用的区别

assets下的资源如果要在js中使用的话,路径需要经过webpack中的file-loader编译,如果直接编写路径会导致加载资源失败(找不到资源)。

<template>
    <div>
        <img :src="liuyanla" title="assets和static目录的区别">
        <img :src="liuyanla" title="assets和static目录的区别>
    </div>
</template>

export default {
    name: 'yanggb',
    data () {
        return {
            assetsUrl: require('../assets/yanggb.png'),
            staticUrl: '/static/yanggb.png'
        }
    }
}

因为webpack使用的是commonJS规范,因此必须要使用require才能将模块化的静态图片资源加载进来(引用依赖)。

场景三:在打包时候的区别

在vue的组件中,所有的模板和css都会被vue-html-loader和css-loader解析,并查找资源的url,比如在<img src=”./liuyanla.png”>中,该url是相对的资源路径,就会由webpack解析为模块依赖,而因为liuyanla.png不是js,当被视为模块依赖的时候,就需要使用url-loader和file-loader来处理它。因为vue-cli的webpack脚手架中已经配置了这些loader,因此可以使用相对/模块路径来访问这些资源文件。

由于这些资源在webpack构建的过程中可能会被内联/复制/重命名,因此它们可以视作是源码的一部分,这也是为什么建议要将webpack处理的静态资源放在src中和其他的源文件放在一起的原因。事实上,这些资源文件甚至可以不必放到src/assets目录下,而是放置到每个放置组件的目录下,使用模块/组件的组织方式使用它们。

相比之下,在static下目录下面的文件是不会被webpack处理的,这些资源文件会被直接复制到最终的打包目录下面(默认是dist/static),且必须使用绝对路径来引用这些文件。这一特性是通过在config.js文件中的build.assetsPublicPath和build.assetsSubDirectory链接来确定的。

有时我们需要修改node_module目录中的源码,在插件源码修改后,打包后的文件应放在static目录。如果放在其他目录,webpack会重新打包,可能导致出现例如【did you register the component correctly? 】这样的组件报错。

总结

1.static中的文件是不会经过webpack编译的,一般建议存放一些外部第三方(公用)的静态资源文件。

2.assets因为会经过webpack编译,建议是存放一些只有组件自己使用到的静态资源。

以上就是vue中assets和static目录的区别的全部内容,欢迎交流。

本文参考:https://www.cnblogs.com/yanggb/p/12452389.html