Getting 404 für statische Assets in Vue CLI-Projekt

Question

Ich finde es schwierig, ein Projekt mit VUE Webpack-Vorlage bereitzustellen. Wir servieren eine Laravel App mit nginx in unserem Server. Die Öffnung www.example.com dient also unserer Laravel-Installation. Jetzt wollte ich www.example.com/lite verwenden, um die Lite-Version der App zu bedienen, die ein SPA-Build mit vue-webpack Vorlage ist. Und dafür habe ich eine Position Block in unserer nginx Konfiguration

location /lite { 
       # First attempt to serve request as file, then 
       # as directory, then fall back to displaying a 404. 
       #try_files $uri $uri/ =404; 
       index index.html index.htm; 
       alias /var/www/html/crm-lite/dist; 
       try_files $uri $uri/ /index.html; 
     } 

Und ich habe assetsPublicPath-assetsPublicPath: '/lite' in build/index.js geändert; Aber wenn ich es beim Durchsuchen öffne, bekomme ich 404 für die statischen Assets nicht gefunden. Die URL sieht so aus http://example.com/lite/static/js/app.3c11ea8ceff19f8f33ff.js

Wenn ich den Inhalt des Ordners dist/ in unser Dokumentenstammverzeichnis kopieren und es nur mit IP-Adresse öffnen, funktioniert es gut. Gibt es irgendeine Konfiguration, die ich vermisse? Danke für die Hilfe.

Answer 1

Alias ​​ist keine sehr zuverlässige Methode zum Verschieben einer Seite, habe ich gefunden; aber es bietet die einzigartige Fähigkeit, statische Anfragen in einen anderen Ordner außerhalb des Elternteils umzuleiten, was nett ist.

Ich spielte mit Ihrer Konfiguration für ein bisschen, bevor ich herausfand, was vor sich ging: Sie verpassten den abschließenden/im Verzeichnisweg. (PS, brauchen Sie nicht die try_files oder Index-Richtlinien)

Try this:

location /lite { 
    alias /var/www/html/crm-lite/dist/; 
}