Production Deployment

Deploy your Vue app to static hosts like Netlify, Vercel, or GitHub Pages. Build your app and upload the dist/ folder.

Proper production deployment ensures your app is fast, secure, and reliable. Here are some best practices:

Steps

1. Build for production
   Run the build command to generate optimized static files in the dist/ directory.

   npm run build

2. Choose a hosting provider

   • Netlify: Drag and drop your dist/ folder or connect your repository for automatic deployments.
   • Vercel: Import your project and set the output directory to dist/.
   • GitHub Pages: Push the contents of dist/ to the gh-pages branch.

3. Configure your server
   For single-page applications, ensure all routes serve index.html. For example, in Netlify, add a _redirects file:

   /*    /index.html   200

4. Set environment variables
   Use .env.production for production-specific settings.

5. Enable HTTPS
   Use HTTPS for security. Most modern hosts provide free SSL certificates.

6. Optimize assets

   • Compress images and static files.
   • Use a CDN for faster asset delivery.

Example

npm run build
# then deploy dist/ to your host

Further Reading

• Vue Deployment Guide
• Netlify Docs
• Vercel Docs
• GitHub Pages Docs