Vue.js应用中静态资源的路径

Question

3

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

官方文档建议使用绝对路径，如下所示:

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

问题在于，静态资源不会被vue-loader和webpack本身处理，因此在最终输出的样式表中，URL将无法正确设置。所有将由webpack url-loader处理的资源都将根据publicPath配置获取正确的相对URL。对于静态资源，也希望达到同样的效果。

您有任何关于如何结合vue.js应用程序使用静态资源的想法吗？

更新

经过研究和大量尝试，我决定将最终的样式表和脚本捆绑包放置在与index.html相邻的根文件夹中。生成的路径将正常工作。这并不是最优的解决方案，因为我更喜欢将脚本和样式表放在子文件夹中（尽管它们只包含一个文件）。但无论如何，我有了一个能够生成一致且有效的构建过程的方法。

- jimmy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user6748331 · Accepted Answer

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

相比之下，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]。