vue中的相对链接返回任何内容

Question

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

如果我提供一个绝对网址，它可以正常工作

当我构建应用程序或本地时，这不起作用：

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

使用资产时应使用require

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

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

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

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

https://example.com/list/

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

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

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

Webpack负责处理这些问题（在某种程度上，您需要确保不要弄乱基本标记）。