Laravel (5.5) -生产版第三方JS库

Question

我在我的Laravel5.5项目中使用第三方JS库(传单和传单绘制)。我使用npm安装了库：

npm install leaflet

npm install leaflet-draw

我在资源/资产/js/app.js中添加了折叠行：

require('leaflet');

require('leaflet-draw');

在资源/资产/社会保障/应用程序中：

@import "~leaflet/dist/leaflet.css";

@import "~leaflet-draw/dist/leaflet.draw.css";

在那之后，我跑：

npm run dev

资产编译，我的应用程序在本地主机上运行良好(我使用php artisan serve运行基本的laravel服务器)。

我尝试将此应用程序部署到服务器。我把它部署到一个子文件夹中，所以地址是：https://example.com/laravelapplication

我遵循了这样的指令：https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04

所有路线和网址都能正常工作。我没有发现任何代码错误。但是，传单和传单绘制库在获取图标和字体时遇到困难。我知道这些错误：

GET https://example.com/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd5728f... 404 (Not found)

GET https://example.com/images/vendor/leaflet/dist/images/layers.png?a613745... 404 (Not found)

我不确定，但看起来库在错误的地方搜索字体和图标。它应该使用https://example.com/laravelapplication而不是https://example.com

有人知道为什么会这样吗？

Answer 1

如果您知道这些图像的实际URL在应用程序部署后位于哪个位置，那么解决办法就是简单地对这些位置进行硬编码：

对于传单，您可以使用L.Icon.Default的imagePath选项：(在JavaScript中)

L.Icon.Default.prototype.options.imagePath =
  "https://example.com/laravelapplication/images/vendor/leaflet/dist/images/";

对于Leaflet.draw插件，您必须重写CSS规则：(在您的CSS规则中，确保它是在Leaflet.Drag的CSS之后计算的)

.leaflet-draw-toolbar a {
  background-image: url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
  background-image: linear-gradient(transparent, transparent), url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
}

.leaflet-retina .leaflet-draw-toolbar a {
  background-image: url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet-2x.png');
  background-image: linear-gradient(transparent, transparent), url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
}