So, you’ve built a fantastic Vue.js application, and now it’s time to take it live! But how do you deploy it correctly to ensure smooth performance, security, and scalability? Deploying a Vue app may seem complex, but don’t worry—I’ll walk you through it step by step. Whether you’re using Vercel, Netlify, GitHub Pages, or a VPS, this guide will help you set up your Vue.js app in production like a pro.
Step 1: Build Your Vue App
Before deployment, you need to generate the production-ready files. Open your terminal and run:
npm run build
This command creates a dist folder containing optimized files ready for deployment.
Step 2: Choose Your Deployment Platform
Now, let’s explore different hosting options.
1. Deploying on Netlify
Netlify is a great choice for Vue apps due to its simplicity and built-in CI/CD.
- Sign in to Netlify and connect your GitHub repo.
- Choose your Vue project and set the build command:
npm run build
- Set the publish directory to
dist/and deploy.
Your app will be live within seconds!
2. Deploying on Vercel
Vercel is another easy-to-use hosting service with fast deployments.
- Sign up on Vercel.
- Import your Vue.js project from GitHub.
- Set the build command:
npm run build
- Define
dist/as the output directory and deploy.
3. Deploying on GitHub Pages
If your Vue app is a static site, GitHub Pages is a free hosting option.
- Install the GitHub Pages package:
npm install -g gh-pages
Add the following script to your package.json:
"scripts": {
"deploy": "vue-cli-service build && gh-pages -d dist"
}
Run:
npm run deploy
Your Vue app is now hosted on GitHub Pages!
4. Deploying on a VPS (Nginx & PM2 for Performance)
For better control, a Virtual Private Server (VPS) is a great option.
Set Up Your Server
- Install Node.js and Nginx:
sudo apt update
sudo apt install nodejs npm nginx -y
Upload your Vue app files and install dependencies:
npm install
npm run build
Install PM2 to keep your app running:
npm install -g pm2
pm2 start npm --name "vue-app" -- start
Configure Nginx as a Reverse Proxy
- Edit the Nginx config file:
sudo nano /etc/nginx/sites-available/default
Add this configuration:
server {
listen 80;
server_name yourdomain.com;
root /var/www/vue-app/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
Save the file and restart Nginx:
sudo systemctl restart nginx
Your Vue app is now live on your VPS!
Step 3: Optimize for Performance
For a smooth user experience, follow these best practices:
- Enable gzip compression in Nginx for faster load times.
- Use lazy loading to load components only when needed.
- Set up caching for static assets to reduce server load.
Deploying a Vue.js application doesn’t have to be overwhelming. Whether you choose Netlify, Vercel, GitHub Pages, or a VPS, the right deployment method depends on your project’s needs. Take the time to optimize performance and security for a successful launch.
If you need expert web development services, check out CodeHunger, a top-rated IT company offering professional Vue.js development and deployment solutions.
