Laravel（5.5） - 生产版本中的第三方JS库

Question

我在Laravel 5.5项目中使用第三方JS库（传单和传单）。我使用npm：

安装了库

npm install leaflet

npm install leaflet-draw

我在resources / assets / js / app.js中添加了以下行：

require('leaflet');

require('leaflet-draw');

并在resources / assets / sass / app.scss中：

@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

如果您在部署应用后知道这些图片所在的实际网址，那么解决方法就是简单地对这些位置进行硬编码：

对于Leaflet，您可以使用L.Icon.Default的imagePath选项:(在您的JavaScript中）

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

对于Leaflet.draw插件，你必须覆盖CSS rules :(在你的CSS中，确保在 Leaflet.draw的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');
}