处理静态资产

您会注意到在项目结构中我们有两个静态资产目录：src/assets和static/。它们之间有什么区别？

Webpacked资产

要回答这个问题，我们首先需要了解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：您可以使用它们基于模块/组件来组织它们。例如，您可以将每个组件放在其自己的目录中，其静态资产就在它旁边。

资产解决规则

• 相对URL，例如./assets/logo.png将被解释为模块依赖性。它们将替换为基于Webpack输出配置的自动生成的URL。

• 非带前缀的URL，例如，assets/logo.png将被视为与相对URL相同并被翻译成./assets/logo.png。

• 带有前缀的URL~被视为模块请求，类似于require('some-module/image.png')。如果要利用Webpack的模块解析配置，则需要使用此前缀。例如，如果您有解析别名assets，则需要使用<img src="~assets/logo.png">以确保遵守别名。

• 根相对URL，例如/assets/logo.png根本不处理。

在JavaScript中获取资产路径

为了让Webpack返回正确的资产路径，您需要使用require('./relative/path/to/file.jpg')，它将被处理file-loader并返回已解析的URL。例如：

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

请注意，上面的示例将包括./bgs/最终构建中的每个图像。这是因为Webpack无法猜测它们将在运行时使用哪些，因此它包含了所有这些内容。

“真正的”静态资产
相比之下，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]。