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

Posted 2023-02-22

【中文标题】vue.js 应用程序中静态资产的路径

【英文标题】：Path to static assets in vue.js application

【发布时间】：2018-05-20 12:13:33

【问题描述】：

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

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

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

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

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

更新

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

【参考方案1】：

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

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

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

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

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

【讨论】：

非常感谢。我已经在使用这种技术了。问题是，我必须在我的 vue 组件内的 css 规则中使用绝对路径。由于此文件夹直接复制到正确的目的地，因此我的最终 style.css 中的路径需要是相对的（../assets/images/lo/example.svg）。你知道如何实现它吗？

为什么你的css规则必须使用绝对路径？

这是GitBook官方推荐的。当我将这些路径更改为相对路径时，不幸的是，构建过程会以错误结束，因为无法解析那些引用的资产。

我已经用一种可能的方法更新了我的问题。感谢您的意见！

我明白了。但我不明白为什么根文件夹有效，但绝对路径“/静态”无效。很奇怪。