一直以来都有个疑问在vue的项目中有两个静态资源目录文件夹public和assets，在实际项目里如果有资源到底是放在哪个里面?两者有什么区别？
看这个之前首先需要了解 vue-cli脚手架处理静态资源的方式：
一、处理静态资源
下面是官网说法：
静态资源可以通过两种方式进行处理：
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在
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
