Question

我在Vue中有两个组成部分，一个带有用于显示图像的灯箱，另一个用于播放音频。我获得了到资产的相对链接，但是正在显示和播放图像或音频。首先，我认为这是组件本身的问题，但由于它不适用于这两个组件，因此可能还有其他问题。

如果我提供绝对网址，则出于某些原因它可以正常工作

这在我构建应用程序或本地构建时均无效：

export default {
      components: {
        VueLitebox,
        "vue-audio": VueAudio
      },
      data() {
        return {
          // AUDIO
          file1: "../assets/music/myfile.mp3",

          // LITEBOX
          images: [
            ".../assets/img/myimage.jpg",

这很好：

export default {
  components: {
    VueLitebox,
    "vue-audio": VueAudio
  },
  data() {
    return {
      // AUDIO
      file1: "http://mypage.com/music/myfile.mp3",

      // LITEBOX
      images: [
        "http://mypage.com/img/myimage.jpg",

我当然可以分别上传图像和音乐并使其正常工作，但是感觉有点不方便。

有什么问题？

更新：

感谢您的回答。现在我有两种方法。两者都有效。

一种是将我的所有资产都放在公用文件夹中。可以通过以下链接解决该问题：

"/assets/img/myimage.jpg",

另一种方法是使用require。

require("../assets/img/myimage.jpg"),

两者都可以，但是有没有更好的方法呢？

Answer 1

使用资产时，应使用要求

file1: require("../assets/music/myfile.mp3")

在没有要求的情况下，webpack不会知道您要捆绑该资产，并且您的路径将保持不变。实际上，webpack知道如何通过使用插件而不是开箱即用来处理这类文件。

关于它使用绝对路径而不是相对路径的事实。您的相对路径在开发服务器上的本地文件系统中有效。部署应用程序时，您不是在本地文件系统中运行，而是在Web上运行。即使使用类似的算法解析相对路径，您的结果也将取决于使用组件的URL，而不取决于vue文件的路径。

例如，如果组件在表单的URL上呈现

https://example.com/list/

相对路径将解析为 https://example.com/assets ，这可能是您想要的。但是在以下网址上

 https://example.com/list/1/

将解决 https://example.com/list/assest ，这不是您期望的。

Webpack解决了这个问题（在某种程度上，您需要确保不要弄乱 base 标签）。

Vue中的相对链接一无所获

1 个答案: