Vue中public/assets目录区别

一直以来都有个疑问在vue的项目中有两个静态资源目录文件夹public和assets，在实际项目里如果有资源到底是放在哪个里面?两者有什么区别？

看这个之前首先需要了解 vue-cli脚手架处理静态资源的方式：

一、处理静态资源

下面是官网说法：

静态资源可以通过两种方式进行处理：

1. 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
2. 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

我自己的理解：

assets中资源 需要通过 相对路径 被引用，并且在webpack打包的时候会被 打包工具处理，

而在public目录下的  是通过 绝对路径 被引用，public下的资源 打包的时候不会 被打包工具处理，只是拷贝一份资源到public下。

下面是我做的验证图片，分别对 public下文件和assets下资源【这里的资源不局限于图片，还有js、css等都可以属于静态资源】进行打包处理结果。

1.1 相对路径引用/导入资源

当你使用相对路径的时候会发生什么哪？  下面是官网说法：

 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require('./image.png')，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

在其内部，我们通过 webpack 的 Assets Modules 配置，用版本哈希值和正确的公共基础路径来决定最终的文件路径，并将小于 8KiB 的资源内联，以减少 HTTP 请求的数量。

你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将内联图片资源限制设置为 4KiB：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .set('parser', {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4KiB
          }
        })
  }
}

根据上面官方的讲解，大概情形在项目中的展示情况：

1.1.1 动态导入资源时  使用require

我们在模板中使用，需要通过 require 的这种方法去引入：

<img :src="logo" />
 
export default {
  data(){
    return {
     //相对路径不一定都是./，也可能是../，按照图片存放位置来决定
      logo: require("./imgs/logo.png") 
    }
  }
}

1.1.2 背景样式使用 url

<template>
  <div>
    <div class="login"></div>
  </div>
</template>
 
<style scoped lang="scss">
  .login{background: url("./imgs/login.png") no-repeat center;}
</style>

public：

public下的 静态资源 不会经过webpack处理,会被直接拷贝到 dist文件的根目录下。下面我做了具体测试将一张图片放到public下，然后对象进行打包。

• 路径设置时无需添加 public/，默认加载 public 文件夹下的图片。直接使用‘/’定位到根目录即可

assets：

而assets中文件 只有文件中被引用打包后才会被复制到对应的 文件夹下

四、总结
public放不会变动的文件（相当于vue-cli2.x中的static）
public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中 publicPath 的配置，默认的是/。

assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。

简单来说就是就是public放别人家js文件（也就是不会变动），assets放自己写的js、css文件（需要改动的文件）

上面自己记录总结用的，引用：

vue 图片资源应该如何存放并引入（public、assets）？_vue引用public资源-CSDN博客

https://www.cnblogs.com/vickylinj/p/15599154.html