SoFunction
Updated on 2025-04-13

Causes and solutions for 404 errors after deploying Vue project to server

1. Vue project deployment steps

In the development model of front-end and back-end separation, independent deployment of front-end projects usually involves the following steps:

  • Build a project: After the Vue project is built, a series of static files are generated.
  • Upload file: Use the scp command to upload the built files to the server's web container to specify a static directory.
scp  user@host:/xx/xx/xx
  • Configure the web server: Taking Nginx as an example, configure the server to point to the static file directory.
server {
  listen 80;
  server_name ;
  location / {
    index /data/dist/;
  }
}
  • Restart Nginx: Check the configuration and restart Nginx to apply the changes.
nginx -t
nginx -s reload
  1. Access the domain name: Enter the domain name in the browser to access the deployed application.
    The above is the most direct deployment method. More advanced deployment methods, such as automation, mirroring, container and pipeline deployment, are essentially abstracting and programmatically, and this article will not be discussed in detail.

2. 404 error causes and solutions

Error scenario

  • Problem description: The Vue project runs normally locally, but after deploying to the server, it will have a 404 error.
  • Error location: HTTP 404 error indicates that the requested resource does not exist.

Cause analysis

  • History mode problem: In Vue single page application (SPA), all user interactions are achieved by dynamically rewriting the current page. The construct only produces,andnginxThe configuration may not cover all routes.
  • No problem with Hash mode: Hash mode does not include hash value in HTTP requests, so the page will not be reloaded due to hash changes, avoiding 404 errors.

Solution

  1. Modify Nginx configuration: Configure all page requests to redirect to, handed over to the front-end routing to process.
server {
  listen 80;
  server_name ;
  location / {
    index /data/dist/;
    try_files $uri $uri/ /;
  }
}

Restart Nginx after modification.

nginx -s reload
  • Cover all routes: Overwrite all routing situations in the Vue application and provide 404 pages.
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

The core ideas of other backend configuration solutions (such as Apache) are similar, and this article will not be described in detail.

This article about the reasons and solutions for the 404 error after deploying Vue project to the server. For more information about deploying Vue project to the server, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!