面试题：Vue项目中的assets与static目录的差异与区别是什么

Vue项目中的assets与static目录的差异与区别是什么？（static中会复制，assets中会编译）

在vue的目录结构中，static是静态资源目录，可以用于放置图片、字体等。
而在src目录（开发目录）下，同样提供了一个assets目录，可以用于存放图片，比如logo等。
虽然这两个目录都可以用于放置图片，但是在使用上却是有一些差别的。
1、相同点：
在HTML中使用，两者都可以直接使用路径来访问。

<img src="../assets/yanggb.png" alt="yanggb" title="assets中的图片">
<img src="/static/yanggb.png" alt="yanggb" title="static中的图片">

注意：访问assets目录下的资源文件使用的是相对路径，而访问static目录下的资源文件则需要使用绝对路径。
2、不同点：
static :
static中的文件是不会经过编译的，打包后会生成dist文件夹，static中的文件只是复制复制一遍而已。
这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 链接来确定的。
注意：任何放在 static 中的文件需要以绝对路径的形式引用：

<img src="/static/yanggb.png" alt="yanggb" title="static中的图片">

assets:
assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader重新编译，使用时要用相对路径进行引用，不能使用绝对路径。
注意：
在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是 commenJS 规范，必须使用require才可以
// HTML 结构

//   直接显示文件内容
<h5>直接路径</h5>
     <img src="../assets/logo.png" title="assets中的图片">
	 <img src="/static/logo.png" title="static中的图片">

//   动态显示文件内容
<h5>动态路径</h5>
<img :src="asetUrl" title="assets中的图片">
<img :src="sticUrl" title="static中的图片">

// JS
export default {
name: ‘myDemo’,
data (){
return {
asetUrl: require(’…/assets/logo.png’),
sticUrl: ‘/static/logo.png’
}
}
总结：
1.assets中的文件会经过webpack打包，重新编译，建议是存放一些只有组件自己使用到的静态资源。
2.static中的文件不会经过webpack编译，项目在经过打包后会生成dist文件夹，static中的文件只是复制一遍而已，
一般建议存放一些外部第三方（公用）的静态资源文件。