vue-cil中public(旧版本为static)和assets文件夹的区别

使用npm run build命令时,public中的文件会被直接复制到dist文件夹下,使用public文件夹中的资源时应该使用绝对路径,采用BASE_URL+文件名写法

<img :src="`${publicPath}1.jpg`" alt="public中的图片找不到啦">  
    
data:function(){
    return {
      publicPath:process.env.BASE_URL
    }
  }

而assets文件夹中的资源会经过webpack编译,生成的文件名会加上一个哈希值,图片资源会被放到dist/static/img文件夹下。

优缺点比较:

  1. assets文件夹更适合放置会经常变动的资源,public文件夹更适合放置不会变动的资源,因为浏览器的缓存功能,相同文件名的资源是不会被二次请求的,这就会导致public文件夹中资源更新时浏览器不会更新。

  2. 经过webpack打包后,很多资源会被整合到一起,可以减少请求服务器的次数

  3. 引用assets中不存在的资源编译时就会报错,而引用public中不存在的资源会在用户端产生404报错

### 回答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 中的 assets static 两个文件夹在项目中起到不同的作用。 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、付费专栏及课程。

余额充值