vue.js 应用程序中静态资产的路径

Question

我正在开发一个基于 vue-cli webpack 模板的单页应用程序。由于我们也必须使用静态资产，因此我们需要在样式表中引用它们。

官方文档推荐使用如下绝对路径：

background-image: url('/assets/images/lo/example2.svg');

问题是，静态资源不会由 vue-loader 和 webpack 本身处理，因此在最终输出样式表中不会正确设置 url。webpack url-loader 将处理的所有资产将根据您的 publicPath 配置获得正确的相对 url。静态资产也需要同样的效果。

您知道如何将静态资产与基于 vue.js 的应用程序结合使用吗？

更新

经过研究和大量的反复试验，我决定将最终的样式表和脚本包放在 index.html 旁边的根文件夹中。生成的路径将正常工作。不是最佳解决方案，因为我更喜欢脚本和样式表的子文件夹（尽管它们只包含一个文件）。但尽管如此，我还是有一个生成一致且有效的工件的构建过程。

Answer 1

对于“真正的”静态资产，请使用静态目录。

相比之下， static/ 中的文件根本不会被 Webpack 处理：它们被直接复制到最终目的地，并具有相同的文件名。您必须使用绝对路径引用这些文件，这是通过在 config.js 中加入 build.assetsPublicPath 和 build.assetsSubDirectory 来确定的。

你也可以在 config/index.js 中覆盖这个默认路径

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

任何放置在 static/ 中的文件都应该使用绝对 URL /static/[filename] 来引用。如果您将 assetSubDirectory 更改为 assets，那么这些 URL 将需要更改为 /assets/[filename]。