Vor kurzem erforderte das Projekt des Unternehmens die Verwendung von Vue Family Bucket + Element-UI zur Entwicklung des Backends. Das ursprüngliche Projekt wurde jedoch von requirejs geschrieben, sodass alle Laravel-Module unabhängig voneinander installiert und deinstalliert werden können, dh ihre js und css Sie sind alle unabhängig und diese öffentlichen werden direkt im Themenverzeichnis abgelegt. Dann stellt sich die Frage, wie ein Single-Page-Programm diese Lösung implementiert. (Hinweis: Das Modul hier ist das Modul von Laravel , nicht das Modul von js und npm )themes/backend
) werdenResources/Bakcend/assets
目录到public/backend/modules/模块名
下面,并且在themes/bakcend/index.blade.php
Das Backend einer einzelnen Seite wird mit Webpack gepackt, und das Verpackungsverzeichniss ist unten (
public/backend/modules/模块名
下面,并在打包后自动复制一份到modules/模块名/Resources/Bakcend/asset
Jedes Modul kann über ein eigenes Backend-Menü, eine eigene Verwaltungsschnittstelle usw. verfügen und diese werden alle mit Vue, Vue-Router und Element-UI implementiert. Die Einstiegsseiten aller Module befinden sich unter, (
PHP-Backend wurde gelöst, aber Front-End-JS hat Problemethemes/backend_default/index.blade.php
).
Das Problem tritt im Frontend-Aspekt der vierten Anforderung oben auf. Wenn eine Einzelperson oder ein internes Team alle Module entwickelt, wird es kein solches Problem geben. Unterschiedliche Entwicklungen von Drittanbietern verursachen jedoch Probleme bei der Webpack-VerpackungDerzeit gibt es zwei Lösungen, aber keine kann das Problem grundsätzlich lösen
Das zweite istintegrierte Verpackung unter einem Theme/Backend-Theme
Die Ressourcen jedes Moduls werdenthemes/backend/modules/{module-name}
里面,打包后自动抽取到各自的module/Resources/Backend/assets
中,然后别人安装module的时候自动publish
这个module里面的assets
到public/backend/modules/{module-name
}目录里,但是这样也不行,因为如果每个开发者负责的module不同,所以在webpack.config.js
or webpack.mix.js里打包的东西也是不同的,比如我写blog module
的app.js,你写dashboard module
的app.js,那么各自打包后的assets生成的vendor.js
(in der öffentlichen Klassenbibliothek gespeicherte Dateien) mit unterschiedlichen Webpack-Modul-IDs platziert (auch wenn die öffentlichen Klassen von app.js aller Module Wenn die Bibliotheken gleich sind), tritt beim Laden der app.js verschiedener Module nach der Veröffentlichung ein Fehler auf, da die Vendor.js jedes Moduls unterschiedlich sind und Sie keines zum Laden auswählen können
Wie kann dieses Problem konkret gelöst werden?
参考:/a/11...
基于 webpack 的 SPA 单页 Web 应用 动态加载插件的机制