vue+webpack静态资源路径引用

处理静态资产

你可能已经注意到，在项目结构中我们有两个静态资产目录：src/assets和static/。他们之间有什么区别？

要回答这个问题，我们首先需要了解Webpack如何处理静态资产。在*.vue组件中，您的所有模板和CSS都会被解析vue-html-loader并css-loader查找资产URL。例如，在<img src="./logo.png">和中background: url(./logo.png)，"./logo.png"是一个相对资产路径，将由Webpack解析为模块依赖项。

因为logo.png不是JavaScript，当被视为模块依赖时，我们需要使用url-loader和file-loader处理它。此模板已经为您配置了这些加载器，因此您可以免费获得文件名指纹识别和条件base64内联等功能，同时可以使用相对/模块路径而无需担心部署。

由于这些资产可能在构建期间内联/复制/重命名，因此它们本质上是源代码的一部分。这就是为什么建议将Webpack处理的静态资源放在/src其他源文件中。实际上，您甚至不需要全部放入/src/assets：您可以使用它们基于模块/组件来组织它们。例如，您可以将每个组件放在其自己的目录中，其静态资源就在它旁边。

“真正的”静态资产

相比之下，static/Webpack根本不处理文件：它们按原样直接复制到最终目标，文件名相同。必须使用绝对路径引用这些文件，绝对路径由join build.assetsPublicPath和build.assetsSubDirectoryin 确定config.js。

例如，使用以下默认值：

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

放入的任何文件static/都应使用绝对URL引用/static/[filename]。

注意：如果更改assetSubDirectory为assets，则需要将这些URL更改为/assets/[filename]

应用：

在src/components/ele.vue中，data数据里引入文件数据

imgsUrl:[
          {src:'../static/imgs/02.jpg'},
          {src:'./static/imgs/03.jpg'},
          {src:'http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg'}
     ]

第一行为相对路径，第二行为使用绝对URL引用./static/[filename]，第三行为网上图片路径。

建议做法为：绝对URL引用./static/[filename]

补充：

在原来的绝对URL引用/static/[filename]基础上，在最之前添加了一个点.，因为vue项目打包后，如果不加.，无法正确获取图片等静态资源路径。

.