vue 项目中assets文件夹与static文件夹引用的区别

  首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的。

 1、assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。build的时候由Webpack解析为模块依赖。

 2、 static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
    任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。
  所以如果需要引用static目录下的图片及其他资源,应该使用绝对路径,webpack配置如下:

 



转载于:https://www.cnblogs.com/x123811/p/9230700.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vueassetsstatic两个文件夹都是用于存储静态资源的文件夹。但它们之间还是有一些区别的。 assets文件夹主要用于存放需要打包的静态资源,如CSS、JavaScript和图片等。这些资源会被webpack打包,并且会根据需要在项目引用和使用。 而static文件夹则用于存放不需要打包的静态资源,如一些第三方库或者自己编写的一些JS、CSS、图片等。这些资源在打包时不会被webpack处理,而是直接复制到打包后的文件夹。 因此,如果你的静态资源需要被打包处理,就应该放在assets文件夹,如果不需要被打包处理,就应该放在static文件夹。 ### 回答2: Vue assets 文件夹static 文件夹都是用于存放静态资源的文件夹,但它们之间还是有一些区别的。 assets 文件夹主要用于存放项目的静态资源,如样式文件(CSS)、图片文件等。在开发过程,这些资源会经过 webpack 编译,并且会被基于模块的构建工具处理。这是因为在 Vue 项目,我们可以使用相对路径引入这些资源,然后在代码进行动态引用,以便实现按需加载和按需显示。因此,assets 文件夹的资源会经过Vue的处理和打包,最终在项目的静态资源引用和使用。 而 static 文件夹则是用于存放不需要进行特殊处理的静态资源。在开发过程static 文件夹的资源不会经过 webpack 编译处理,也不会被 Vue 的构建工具修改文件路径或引用方式。这是因为 static 文件夹的资源是静态的,它们的路径和引用方式在编译期间就已经确定了,不需要运行时进行动态引用static 文件夹的资源会直接被复制到最终打包好的项目,以供访问和使用。 综上所述,assets 文件夹主要用于存放需要进行处理和打包的静态资源,而 static 文件夹则是用于存放不需要进行处理的静态资源。在开发过程,我们应根据资源的性质和使用方式选择将其放置在 assets 文件夹static 文件夹。 ### 回答3: Vue assetsstatic 两个文件夹项目起到不同的作用。 assets 文件夹是用来存放项目的资源文件的,如图片、字体文件等等。当我们在 Vue 组件需要引用这些资源文件时,可以通过相对路径来找到 assets 文件夹的内容。这样做的好处是,当项目需要进行打包时,Webpack 会自动地将 assets 文件夹的资源文件进行处理,并将它们拷贝到输出目录的静态资源文件夹,这样可以确保资源文件被正确引用并能够被项目正确使用。 而 static 文件夹则是用来存放静态资源文件的,如一些第三方库或者插件的 JS 文件、CSS 文件等等。与 assets 文件夹不同的是,static 文件夹的内容不会经过 Webpack 的处理,它们会原封不动地被拷贝到输出目录的静态资源文件夹。这样做的好处是,这些静态资源文件项目引用时,不需要经过额外的处理,可以直接引用它们。 所以,assets 文件夹的内容适用于项目自有的资源文件,而 static 文件夹的内容则适用于一些外部的、不需要额外处理的静态资源文件。这样的划分既能够使项目资源的管理更加清晰,又能够保证这些资源文件能够被正确地引用和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值