我正在开发一个基于 vue-cli webpack 模板的单页面应用程序。由于我们也必须使用静态资源,因此我们需要在样式表中引用它们。
官方文档建议使用绝对路径,如下所示:
background-image: url('/assets/images/lo/example2.svg');
问题是,静态资源不会被 vue-loader 和 webpack 本身处理,因此在最终的输出样式表中不会正确设置 url。 webpack url-loader 处理的所有资源都将根据您的 publicPath 配置获得正确的相对 url。静态资产也需要同样的效果。
您知道如何将静态资源与基于 vue.js 的应用程序结合使用吗?
Update
经过研究和大量的试验和错误后,我决定将最终的样式表和脚本包放置在根文件夹中的 index.html 旁边。生成的路径将正常工作。这不是最佳解决方案,因为我更喜欢脚本和样式表的子文件夹(尽管它们只包含一个文件)。但尽管如此,我有一个构建过程,可以生成一致且有效的工件。
对于“真正的”静态资源,请使用静态目录。
相比之下, static/ 中的文件根本不被 Webpack 处理:它们会以相同的文件名直接复制到最终目的地。您必须使用绝对路径引用这些文件,绝对路径是通过在 config.js 中加入 build.assetsPublicPath 和 build.assetsSubDirectory 确定的。
您还可以在 config/index.js 中覆盖此默认路径
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
放置在 static/ 中的任何文件都应使用绝对 URL /static/[文件名] 进行引用。如果将 assetSubDirectory 更改为 asset,则这些 URL 将需要更改为 /assets/[filename]。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)