VUE中src/assets与static的区别和打包时的区别

参考：https://www.jianshu.com/p/8341edbc7436

src/assets和static两个都是存放静态资源文件。
src/assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行压缩打包上传，
因此使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，引用时需要使用相对路径或者模块路径，
例如：../assets/logo.png
而动态引用路径时写法：require("../assets/logo.png")

static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。
即该目录下的资源不会被 webpack 处理，它们会被直接复制到最终的打包目录下（默认地址是 dist/static），所以引用时需要使用绝对路径。
因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，
所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
该目录下文件的绝对路径写法：/static/filename

若把图片放在assets和static中，html页面中都可以使用；
但是在动态绑定中，assets路径的图片会加载失败，
因为webpack使用的是 ` commenJS ` 规范，必须使用require才可以

<div class="myDemo">
    // 直接显示文件内容
    <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中的图片">
</div>
export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

总的来说：
    assets:编译过程中会被webpack处理理解为模块依赖,只支持相对路径的形式.assets放可能会变动的文件.
    static:存放第三方文件的地方,不会被webpack解析,会直接被复制到最终的打包(默认是dist/static)下,必须使用绝对路径引用这些文件.static放不会变动的

所以简单点使用建议如下：
static中建议放一些外部第三方，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
自己项目中的一些js、css放到assets中。即：自己的文件放在assets，别人的放在static中