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

Question

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

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

colnames(m) <- vector

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

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

更新

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

Answer 1

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

  

相比之下，静态/文件根本不由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]。