vue static和assets的区别

static和assets的区别,原理就在于webpack是如何处理静态资源的css

assets

1)在vue组件中,全部模板和css都会被vue-html-loader和css-loader解析,并查找资源url。html

例:<img src="./logo.png" />  或者  background: url("./logo.png")vue

  由于./logo.png是相对的资源路径,将会由webpack解析为模块依赖;webpack

2)因为logo.png不是js,当被视做模块依赖时,须要使用url-loader和file-loader处理它,vue-cli已经配好了这些loader(webpack)所以可使用相对/模块路径。web

3)因为这些资源可能在构建过程当中被内联、复制、重命名,因此它们基本是代码的一部分,即webpack处理的静态资源放在/src目录中,和其它资源文件放在一块儿。vue-cli

 

事实上,没必要把它们所有放在/src/assets文件下,可使用"模块/组件"的组织方式来使用它们ui

例:能够在每一个放置组件的目录中存放静态资源。url

 

static

1)static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下。spa

   必须使用绝对路径引用这些文件,这是经过在config.js的build.assetsPublicPath和nuild.assetsSubDirectory链接肯定的。htm

2)任何放在static/的文件须要以绝对路径形式引用:/static/[name]。

      若是更改assetsSubDirectory的值为assets,那么路径需更改成:/assets/[filename]。

 

总结

assets里面的资源会被webpack打包进代码,static里面的资源就直接引用了;

通常在static里放一些类库的文件,assets放属于项目的资源文件。

说的再通俗一点,就是static放别人家的资源,assets放本身家的资源。