VUE中assets与static的区别

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使用的是 ` commenJS ` 规范，必须使用require才可以

//   HTML  结构

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

//   JS  

export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

Vue 插件系列

作者：苦咖啡Li
链接：https://www.jianshu.com/p/8341edbc7436
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。