The local code runs smoothly but every time I push it to the server I get a blank screen or a 404 error? I completely understand that feeling, because in the early years of my career, I also suffered many times with deploying Vue.js applications to production.
At Pham Hai, our team has gone through all the ups and downs with frontend projects, from small SPA sites to complex SaaS systems. This article summarizes all that real-life experience, helping you master every corner of the deployment process, from free platforms to dedicated servers, updated to the latest standards of 2026.
"Instant noodle" solution: Deploy Vue.js to Serverless platforms for free
Deploying Serverless deployment helps you bring applications online in just a few minutes without having to worry about server configuration or infrastructure management.
This is the perfect choice for personal projects, portfolios or MVP (Minimum Viable Product). In addition to familiar names like Heroku, AWS Amplify or Render, the current market is dominated by specialized frontend platforms. If you are wondering between platforms, the Vercel Netlify Railway free hosting comparison review will give you the best overview to make a decision.
Vercel: “King” of speed and simplicity
Cách deploy ứng dụng Vue.js lên Vercel cực kỳ mượt mà nhờ hệ thống tự động nhận diện framework và cấu hình sẵn các lệnh build tối ưu.
Dù Vercel là "sân nhà" của Next.js, nhưng nền tảng này hỗ trợ triển khai ứng dụng Vue 3 và Vite xuất sắc không kém. Bạn chỉ cần liên kết repository từ GitHub, Vercel sẽ tự động chạy lệnh npm run build và phân phối thư mục dist lên hệ thống CDN toàn cầu của họ. Mọi thay đổi code đều được cập nhật gần như ngay lập tức. Thực tế, quy trình này cũng tương tự như khi bạn Deploy ứng dụng React lên Vercel Netlify, cực kỳ nhanh chóng và không đòi hỏi kiến thức DevOps sâu.
Netlify: Perfect choice for Jamstack and CI/CD projects
Cách deploy Vue.js lên Netlify mang lại lợi thế lớn nhờ các tính năng tích hợp sẵn như quản lý form, serverless functions và hệ thống deploy preview cho từng nhánh code.
Netlify từ lâu đã là tượng đài trong giới frontend. Đối với các đội nhóm cần review code trước khi merge, tính năng tạo URL xem trước (preview) của Netlify là một "vũ khí" lợi hại. Theo những cập nhật mới nhất, Netlify xử lý các dự án SPA (Single Page Application) rất mượt, bạn chỉ cần cấu hình file _redirects với nội dung /* /index.html 200 để giải quyết bài toán định tuyến.
GitHub Pages: Deeply integrated with the GitHub ecosystem
Cách deploy Vue.js lên GitHub Pages là giải pháp hoàn toàn miễn phí, tận dụng chính kho lưu trữ mã nguồn để host các trang web tĩnh một cách tiện lợi.
Để triển khai thành công, bạn cần tinh chỉnh lại file vue.config.js hoặc vite.config.js. Cụ thể, bạn phải thiết lập thuộc tính publicPath trỏ đúng về tên repository của bạn (ví dụ: /my-repo-name/). Sau đó, bạn có thể sử dụng package gh-pages để đẩy thư mục build lên nhánh gh-pages. Giải pháp này rất tốt cho các dự án nhỏ, nhưng sẽ thiếu vắng các tính năng nâng cao như tự động triển khai phức tạp hay Edge caching mạnh mẽ.
For "warriors" who like control: Deploy Vue.js to VPS
Hướng dẫn deploy Vue.js trên VPS mang lại cho bạn toàn quyền kiểm soát môi trường production, từ việc chọn hệ điều hành, cấu hình web server cho đến tối ưu hóa tài nguyên phần cứng.
As applications grow larger, free platforms may exhibit bandwidth or cost limitations. At this time, renting a VPS (Virtual Private Server) is an inevitable step. Although some of you have the habit of deploy Vue.js to cPanel for convenience, at Pham Hai, we encourage using pure Linux VPS to optimize the best performance. To get started, you need to master how to Deploy website to VPS using SSH to operate safely and securely with your server.
Nginx configuration: The key to handling Vue Router history mode
Deploying deploy Vue.js with Nginx helps you completely solve 404 errors when users refresh the page, thanks to the ability to redirect all requests to the original file.
Khi bật Vue Router history mode, URL của bạn trông rất đẹp (không có dấu #), nhưng server lại không hiểu các đường dẫn ảo này. Nếu người dùng F5 tại /about, Nginx sẽ tìm file about.html và trả về 404. Bí kíp ở đây là cấu hình cấu hình server Nginx sử dụng try_files:
server {
listen 80;
server_name yourdomain.com;
root /var/www/vue-app/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Besides serving static files, you should also learn Nginx configure SSL reverse proxy to securely connect the frontend to the backend API. In addition, to encrypt user data, if you are unclear about security certificates, the article What is SSL HTTPS and how to install it for websites will provide detailed instructions on how to set up a green lock for your domain.
Packaging with Docker: Standardizing deployment environments
Using deploy Vue.js with Docker completely eliminates the "code runs on my machine but fails on the server" situation by isolating the application into containers.
Với Docker Compose và Docker, bạn có thể định nghĩa một quy trình multi-stage build. Ở stage đầu tiên, bạn dùng image Node.js để chạy lệnh build. Ở stage thứ hai, bạn copy thư mục dist sang một image Nginx nhẹ nhàng (alpine) để phục vụ file tĩnh.
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
This approach makes the final image size extremely compact. For those new to container technology, Docker for developers practical guide is a great stepping stone to understanding the basics.
CI/CD with GitHub Actions: Automate the deployment process to VPS
Setting up CI/CD for Vue.js application with GitHub Actions helps automate all stages of testing, building and pushing code to the server every time there are new changes.
Thay vì phải FTP hoặc SSH thủ công để copy file, bạn có thể viết một workflow file .yml. Mỗi khi bạn push code lên nhánh main, GitHub Actions (hoặc GitLab CI/CD) sẽ tự động cài đặt dependency, chạy test, build ra thư mục production và dùng Rsync hoặc SCP để đẩy thẳng lên VPS. Bạn có thể tham khảo thêm kịch bản GitHub Actions CI/CD tự động deploy để xây dựng pipeline chuyên nghiệp cho team của mình.
Classic problems and optimal tips before "going into battle"
Before officially welcoming traffic, optimizing Vue.js production performance and handling technical barriers are the steps that determine the success or failure of the user experience.
The dev environment and the production environment are two completely different worlds. Small errors or slowness can cause you to lose a large number of potential customers.
Lệnh build và thư mục dist: Hiểu rõ “thành phẩm” của bạn
Cách build Vue.js cho production thông qua lệnh npm run build sẽ nén toàn bộ mã nguồn thành các file tĩnh siêu nhẹ, sẵn sàng để web server đọc hiểu.
Dù bạn dùng Vite hay Webpack, quá trình build production sẽ loại bỏ các cảnh báo dev, minify JavaScript/CSS và tạo ra thư mục dist. Đây chính là "thành phẩm" duy nhất bạn cần mang lên server. Tuyệt đối không đẩy thư mục node_modules hay mã nguồn gốc lên public HTML để tránh rủi ro bảo mật và lãng phí tài nguyên.
Environment variables (.env): Configuration management for production and development
Using environment variables helps you safely separate configuration information such as API URLs between code on the machine and actual execution on the server.
Trong Vue, bạn thường tạo file .env.development và .env.production. Lưu ý rằng, với Vite, các biến muốn truy cập ở frontend phải bắt đầu bằng VITE_ (ví dụ: VITE_API_BASE_URL). Khi build, công cụ sẽ tự động thay thế các biến này bằng giá trị thực tế tương ứng với môi trường.
Optimize performance: Lazy Loading, Code Splitting and reducing bundle size
Applying lazy loading and code optimization helps Vue.js applications minimize initial load, resulting in lightning-fast page rendering (FCP).
Thay vì gộp tất cả component vào một file JS khổng lồ, hãy sử dụng cú pháp const User = () => import('./User.vue') trong Vue Router. Việc này giúp chia nhỏ bundle (Code Splitting). Ngoài ra, với các kiến trúc sử dụng Virtual DOM, nếu ứng dụng yêu cầu SEO khắt khe, bạn có thể cân nhắc chuyển hướng sang SSR (Server-Side Rendering) với Nuxt.js. Đừng quên kết hợp các kỹ thuật Tối ưu CSS cho tốc độ tải trang nhanh để loại bỏ CSS thừa, giúp trình duyệt render giao diện nhanh nhất có thể.
Handling CORS errors: A nightmare when calling APIs from another domain
Lỗi CORS khi deploy Vue.js xảy ra khi trình duyệt chặn các request gọi chéo domain; cách xử lý triệt để nhất là cấu hình lại header từ phía backend server.
Trên local, bạn có thể dùng proxy trong vite.config.js để lừa trình duyệt. Nhưng khi lên production, proxy này không còn hoạt động. Bạn bắt buộc phải yêu cầu backend (Node.js, PHP, Java…) trả về header Access-Control-Allow-Origin hợp lệ. Hoặc, nếu bạn tự quản lý VPS, hãy dùng Nginx làm reverse proxy để gọi API nội bộ cùng domain, qua đó "né" hoàn toàn chính sách CORS của trình duyệt.
After all, there is no "absolutely perfect" method of deploying a Vue.js application to production for every situation. From the convenience and speed of Vercel/Netlify for small projects, to the powerful control of Docker and Nginx on VPS for Enterprise systems, the choice depends on your scale and budget. Hopefully through the real-life experiences I share, you will be more confident to bring your "brainchild" to the world in the smoothest and most optimal way.
Which hosting or CI/CD solution are you using for your Vue.js project? Please leave a comment to share your experience or any questions you have below, I will help answer them!
Lưu ý: Thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
