我正在基于vue-cli Webpack模板开发单页应用程序。由于我们还必须使用静态 Assets ,因此我们需要在样式表中引用它们。
官方文档建议使用如下绝对路径:
background-image: url('/assets/images/lo/example2.svg');
问题在于,静态 Assets 不会由vue-loader和webpack本身处理,因此无法在最终输出样式表中正确设置网址。根据您的publicPath配置,将由webpack网址加载程序处理的所有 Assets 都将获得正确的相对网址。静态 Assets 也需要相同的效果。
您是否知道如何将静态 Assets 与基于vue.js的应用程序结合使用?
更新
经过研究和反复试验,我决定将最终的样式表和脚本包放在index.html旁边的根文件夹中。生成的路径将正常工作。这不是最佳解决方案,因为我更喜欢脚本和样式表的子文件夹(尽管它们只包含一个文件)。但是,尽管如此,我仍然拥有一个生成一致且有效的 Artifact 的构建过程。
最佳答案
对于“真实”静态 Assets ,请使用静态目录。
您也可以在config / index.js中覆盖此默认路径
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}