Publiceer uw
Vue-project
Upload de statische uitvoer van Vue, Vite, Vue CLI of Nuxt en publiceer deze met fallback in de geschiedenismodus, HTTPS, wereldwijde levering en eigen domeinen, klaar wanneer u ze nodig heeft.
base: './',
Weet welke Vue-map u moet uploaden
De meeste Vue-publicatieproblemen beginnen vóór het hosten: de verkeerde uitvoermap, het verkeerde basispad of een build waarvan niet lokaal een voorbeeld is bekeken.
Vite + Vue
Vite plaatst de productiebuild standaard in dist. Als uw configuratie build.outDir of base verandert, upload dan de daadwerkelijke uitvoermap en test asset-URL's.
Vue CLI
Vue CLI statische builds worden meestal gepubliceerd vanuit dist. Als de app wordt bediend vanuit een subpad, moet publicPath overeenkomen met die uiteindelijke URL-structuur.
Nuxt statische uitvoer
Nuxt kan statische uitvoer produceren, maar servergerenderde routes en server-API's hebben runtime nodig. Upload voor deze flow alleen de gegenereerde statische bestanden uit public.
Wat de geschiedenismodus van de Vue Router eigenlijk nodig heeft
Schone URLs zijn de moeite waard om te behouden
Hash-routes werken bijna overal, maar URL's met #fragmenten voelen als een noodoplossing en zijn minder prettig voor delen, statistieken en productafwerking.
De geschiedenismodus van Vue Router geeft u schone paden zoals / of /dashboard/settings. Het nadeel is dat de host moet weten hoe hij index.html moet bedienen voor routes die geen echte bestanden zijn.
Hoe DeployPages omgaat met de geschiedenismodus
Wanneer een verzoek niet overeenkomt met een echt statisch bestand, bedient DeployPages de root-index.html en laat Vue Router de uiteindelijke weergave in de browser oplossen.
- Directe bezoeken aan geneste routes mislukken niet onmiddellijk.
- Het hoofddocument wordt geretourneerd als het terugvalantwoord.
- Vue wordt geactiveerd, leest de huidige URL en geeft de juiste route weer.
Vue productiecontroles
Een Vue-app kan in development werken en na het uploaden nog steeds mislukken. Met deze controles worden de meest voorkomende fouten opgespoord voordat de link live gaat.
Basispad
Controleer de base-instelling voor Vite. Voor Vue CLI controleert u publicPath. Verkeerde waarden verschijnen meestal als ontbrekende CSS, JS, lettertypen of afbeeldingen.
Terugval in de geschiedenis
Open direct een geneste route en vernieuw deze. Als de pagina in leven blijft, doet de fallback zijn werk.
Alleen statische uitvoer
DeployPages bedient statische bestanden. API-routes, server-middleware en alleen-SSR-gedrag hebben een aparte backend of runtime nodig.
Lokaal voorbeeld
Gebruik een echte lokale voorbeeldweergaveserver voor de productiebuild. Het openen van dist/index.html met file:// kan problemen verbergen of creëren die niet overeenkomen met de publicatie.
Vue-publicatieflow
Bouw statische assets
Voer de productie-build uit in de Vite-, Vue-CLI- of Nuxt-statische modus, zodat de app wordt verzonden als bestanden die een browser rechtstreeks kan laden.
Zoek de uitvoermap
De meeste Vue- en Vite-projecten bouwen naar dist. Statische Nuxt-projecten gebruiken meestal .output/public of een gegenereerde dist-map, afhankelijk van de configuratie.
Statische Nuxt-builds uploaden meestal .output/public of dist, afhankelijk van uw projectconfiguratie.
Upload en valideer links
Upload de hele uitvoermap en verifieer deep links, routernavigatie en assetpaden nadat de website live is.
Veelvoorkomende Vue-publicatieproblemen
Het vernieuwen van een geneste route retourneert 404
Vue Router gebruikt de geschiedenismodus, maar de host zoekt naar een echt bestand. Gebruik een SPA-fallback zodat onbekende documentroutes index.html retourneren.
CSS- of JS-bestanden retourneren 404
Controleer de Vite-base of publicPath van Vue CLI. Bevestig ook dat u de volledige dist-map hebt geüpload, inclusief de gegenereerde assets.
De app werkt met de hashmodus, maar niet met de geschiedenismodus
De hashmodus blijft routeren na # in de browser. De geschiedenismodus gebruikt schone URL's en heeft server-fallback-gedrag nodig voor directe bezoeken.
Nuxt-uitvoer mist servergedrag
Statische Nuxt-uitvoer kan worden gehost als bestanden. Nuxt-serverroutes, server-middleware en alleen-SSR-gedrag vereisen een serverruntime.
Veelgestelde vragen over de publicatie van Vue
Waarom retourneren mijn CSS- en JS-bestanden 404?
Dit betekent meestal dat assetpaden zijn gebouwd voor een andere basis-URL, of dat de assets-directory niet is geüpload. In Vite controleert u base. In Vue CLI bekijkt u publicPath.
Ondersteunt dit Nuxt?
Ja, voor statische uitvoer. Genereer eerst de statische website en upload vervolgens de gegenereerde public-map. DeployPages is niet het juiste doel voor Nuxt-serverrendering of server-API-routes.
Moet ik de hashmodus of de geschiedenismodus gebruiken?
Gebruik de geschiedenismodus als u schone URL's wilt en uw host terugval naar index.html ondersteunt. De hashmodus is eenvoudiger te hosten, maar laat # achter in elke route aan de clientzijde.
Moet ik het Vue-bronproject uploaden?
Nee. Upload de productie-uitvoermap, meestal dist. Het bronproject bevat ontwikkelingsbestanden en afhankelijkheden die niet bedoeld zijn om rechtstreeks te worden bediend.
Zal de staat Pinia of Vuex een vernieuwing overleven?
Niet automatisch. Een browservernieuwing reset de clientstatus in het geheugen. Houd de belangrijke status vol met localStorage of de persistentieplug-in van uw voorkeur.
Kan ik een vorige versie herstellen?
Ja. DeployPages houdt de publicatiegeschiedenis bij, zodat u indien nodig kunt terugkeren naar een eerdere statische build.