Laravel (5.5) - 生产版本中的第三方 JS 库答案

【问题标题】：Laravel (5.5) - Third party JS libraries in production versionLaravel (5.5) - 生产版本中的第三方 JS 库
【发布时间】：2018-02-23 15:38:09
【问题描述】：

我在我的 Laravel 5.5 项目（传单和传单绘制）中使用第三方 JS 库。我使用 npm 安装了库：

npm install leaflet

npm install leaflet-draw

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

require('leaflet');

require('leaflet-draw');

在资源/资产/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

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

【问题讨论】：

请分享您的webpack 文件以及图片和字体的实际目录

标签： laravel npm leaflet

【解决方案1】：

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

对于 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');
}

【讨论】：