Designed by 77
加载资源 ......
感谢 ♥ 作者
先不感谢了

vue中assets和static目录的区别

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

在HTML中使用

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

<img src="../assets/yanggb.png" alt="yanggb" title="assets中的图片">
<img src="/static/yanggb.png" alt="yanggb" title="static中的图片">

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

在JS中使用(动态绑定)

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

<template>
    <div>
        <img :src="assetsUrl" title="assets中的图片">
        <img :src="staticUrl" title="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="./yanggb.png">中,该url是相对的资源路径,就会由webpack解析为模块依赖,而因为yanggb.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编译,建议是存放一些只有组件自己使用到的静态资源。

 

"你自人山人海中而来,原来只为了给我一场空欢喜。"

你要去做一个大人,不要回头,不要难过。
posted @ 2020-03-13 07:29  yanggb  阅读(3995)  评论(0编辑  收藏  举报