Vue.js VueLablet中的相对平铺路径

我想从我的计算机上加载一个地图，当我用普通的JavaScript解决方案尝试它时，它就工作了

现在我想使用Vue传单2，但路径：

url: '@/assets/map/{z}/{x}/{y}.png',

。。。不起作用

我尝试了一个引用网站的文档中的示例路径，它成功了，所以我的地图和实现都正常工作

唯一的问题是让两者一起工作

我的平铺路径如下所示：

src/assets/map/

我怎样才能实现我的目标

编辑1：

---

编辑2:

我猜您是使用Vue CLI和网页包模板准备了Vue项目，因为您使用了

@

别名和

/assets/

子文件夹

您应该意识到传递给

url

prop的是传单平铺层。作为一个“模板”，它只是实际平铺图像路径的一个“提示”。所以，若您允许webpack管理这些图像，请确保它不会过多地修改它们的文件名，否则传单将无法再检索它们。特别是，不要尝试内联它们（使用url加载程序）或散列它们的名称（使用文件加载程序）

一种更合理的方法是将您的磁贴视为资产（而不是将其作为

src

文件夹中的源代码进行管理），这样webpack完全忽略它们，Vue build将“只是”将它们复制到您的生成输出：将磁贴放入项目根目录下的

/static/

文件夹中，而不是

/src/assets/

注意：如果使用Vue CLI 3，则静态文件夹现在改为：

何时使用

public

文件夹

• 您需要在生成输出中使用特定名称的文件
• 您有数千个图像，需要动态引用它们的路径

使用Vue CLI 3，您可以使用：

数据（）{
返回{
//假设您的平铺图像位于/public/map中/
url:process.env.BASE_url+'map/{z}/{x}/{y}.png'，
归属：''，
}
}

---

考虑到您可能有数千个这样的磁贴图像要复制，您也可以将磁贴与Vue项目完全分离：例如，直接将它们复制到主机服务器。

您好，感谢您抽出时间，但到目前为止，解决方案仍不起作用。我在上面包含了我的文件夹结构，并测试了以下内容：

//url:'../../public/map/{z}/{x}/{y}'，

url:process.env.BASE_url+'map/{z}/{x}/{y}.png'，

打开浏览器的web控制台，查找实际的网络请求。相应地调整您的url。如果你需要进一步的帮助，请报告tiles的网络请求、你的项目结构和网页配置。好的，我现在工作，大约8小时后回家，然后我会尝试一下，谢谢你的帮助，我会在我回家时再次@you并再次测试。好的，我用网络请求编辑我的帖子，但我真的不知道该怎么处理这些信息。提前谢谢。我现在可以使用了。png都是我的错，因为它在Vuelaflet的文档中，而有。jpg，所有这些小时都是为了这样的问题，我为你的时间感到抱歉，我太愚蠢了。