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

最新推荐文章于 2024-07-30 18:53:18 发布

aitoao6

最新推荐文章于 2024-07-30 18:53:18 发布

阅读量2.6k

点赞数 2

文章标签：前端 webpack vue

本文链接：https://blog.csdn.net/aitoao6/article/details/124035445

版权

使用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文件夹下。

优缺点比较：

assets文件夹更适合放置会经常变动的资源，public文件夹更适合放置不会变动的资源，因为浏览器的缓存功能，相同文件名的资源是不会被二次请求的，这就会导致public文件夹中资源更新时浏览器不会更新。
经过webpack打包后，很多资源会被整合到一起，可以减少请求服务器的次数
引用assets中不存在的资源编译时就会报错，而引用public中不存在的资源会在用户端产生404报错