vue assets和static文件夹的作用

assets里面的会被webpack打包进你的代码里,而static里面的,就直接引用了。

一般在static里面放一些类库的文件,在assets里面放属于该项目的资源文件。

Webpacked Assets

在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL。例如,在 <img src="./logo.png">
和 background: url(./logo.png) 中,"./logo.png" 是相对的资源路径,将由Webpack解析为模块依赖

因为 logo.png 不是 JavaScript,当被视为模块依赖时,需要使用 url-loader 和 file-loader
处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader,因此可以使用相对/模块路径。

由于这些资源可能在构建过程中被内联/复制/重命名,所以它们基本上是源代码的一部分。这就是为什么建议将
Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上,甚至不必把它们全部放在 /src/assets:可以用模块/组件的组织方式来使用它们。例如,可以在每个放置组件的目录中存放静态资源。

"Real" Static Assets

相比之下,static/ 目录下的文件并不会被 Webpack 处理:它们会直接被复制到最终目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。如果更改 assetSubDirectory 的值为 assets,那么路径需改为 /assets/[filename]


  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue中,assetsstatic两个文件夹都是用于存储静态资源文件夹。但它们之间还是有一些区别的。 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、付费专栏及课程。

余额充值