vue 项目中图片选择路径位置static 或 assets区别

用 vuecli 的话默认情况下 static 中的文件不会经过 webpack 相关 loader 处理

assets 里面的图片是会经过 webpack 的 loader 处理的,而 static 里面的图片是被直接复制到 dist/static 下面的。
一般是把一些小图片放在 assets 里面,这样一些小图片就可以处理成 base64 了,或者全放在 assets 下面都可以。

相同点:
  assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下。

不相同点:
  assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器

  static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。所以简单点使用建议如下:

  将项目中template需要的css文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

 

### 回答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
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值