vue中 assets 与 static 的区别

相同点：资源在html中使用，都是可以的。

不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。

assets中的文件会进行打包，即压缩和格式化，打包后会放置在static中一同上传服务器。
static中的文件，不会经过编译，体积会偏大。
1. 自定义的样式文件放在assets中进行打包，引入的外部第三方文件放到static中，因为引入的文件已经做过打包处理。
2. static放不会变动的文件，assets放可能会变动的文件。

注意：如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。

    <!-- 直接使用图片路径 -->
    <img src="../../assets/2.png" alt="图片加载失败" title="assets中的图片">
    <img src="../../../static/1.png" alt="图片加载失败" title="static中的图片">
    <br>
    <!-- 动态绑定路径 -->
    <img :src="assetsImg" alt="图片加载失败" title="assets中的图片">
    <img :src="staticImg" alt="图片加载失败" title="static中的图片">

    export default {
      data(){
        return {
          assetsImg: require('../assets/2.png'),
          staticImg: '../static/1.png'
      }
    }