vue中assets与static的区别

1、相同点： 文件夹中的资源在html中使用都是可以的。

2、不同点：

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

2.1 static :

该目录下的文件是不会被wabpack处理的，它们会被直接复制到最终的打包目录下面（默认是 dist/static ），且必须使用绝对路径来引用这些文件。

这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 链接来确定的

注意：任何放在 static 中的文件需要以绝对路径的形式引用：/static/[filename]

2.2 assets:

assets 中的文件会经过 webpack 打包，重新编译

注意：
1、static中的文件，是不会经过编译的，打包后会生成dist文件夹，static中的文件只是复制一遍。
   因此，static中建议放一些外部第三方，自己的文件放在assets，别人的放在static中
2、若把图片放在assets和static中，html页面中都可以使用；
   但是在动态绑定中，assets路径的图片会加载失败，
   因为webpack使用的是 ` commonJS ` 规范，必须使用require才可以

 

  <div>
    <p>直接使用</p>	//直接使用都可以
    <img src="../../assets/assets1.png" title="assets的图片">
    <img src="../../../static/static1.png" title="static的图片">
    <p>动态绑定</p>  //动态绑定路径static可以直接用，assets需要用require（括起来）
    <img :src="assetsurl" title="assets的图片">
    <img :src="staticurl" title="static的图片">
  </div>

data (){
  return {
     assetsURL: require('../../assets/assets1.png'),
     staticURL: '../../../static/static1.png'
  }
}