VUE中asset与static的区别和打包时的区别

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

assets和static两个都是存放静态资源文件。
assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，
打包后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
因此使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。引用时需要使用相对路径或者模块路径，
而动态引用路径时写法：require("./[folder]/[filename]")

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'
    }
}

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