SoFunction
Updated on 2025-03-10

After the local development of the vue project is completed, it will be deployed to the server and reported a 404 error solution.

1. How to deploy

In the separate delivery mode of front and back ends, the front and back ends are independently deployed, and the front end only needs to upload the last build to the target server.webIt can be found in the static directory specified by the container

We knowvueAfter the project is built, a series of static files are generated.

We only need to upload this directory to the target server for regular deployment

// Scp upload User is the host login user, host is the host external network ip, and xx is the static resource path of the web containerscp  user@host:/xx/xx/xx

letwebThe container runs,nginxAs an example

server {
  listen  80;
  server_name  ;

  location / {
    index  /data/dist/;
  }
}

Remember to restart after the configuration is completednginx

// Check if the configuration is correctnginx -t 

// Smooth restartnginx -s reload

After the operation is completed, you can enter the domain name in the browser to access it

Of course, the above is just the simplest and most direct way of deployment.

What automation, mirroring, container, and assembly line deployment are essentially abstracting, isolating, and replacing repetitive labor with programs. This article will not expand on

2. Question 404

This is a classic question. I believe many students have encountered it. Do you know the real reason?

Let's restore the scene first:

  • vueThe project runs normally when it is local, but it is deployed to the server and refreshes the page and has a 404 error

First, the HTTP 404 error means that the resource pointed to by the link does not exist.

The question is why it doesn't exist? And why onlyhistoryWill this problem occur in mode?

Why are there problems in history mode

VueIt is a single-page application

andSPAIt is a model of a web application or website. All user interactions are dynamically rewriting the current page. We also saw it before. No matter how many pages our application has, the building will only produce one.

Now, let's look back at oursnginxConfiguration

server {
  listen  80;
  server_name  ;

  location / {
    index  /data/dist/;
  }
}

Can be based onnginxConfiguration is obtained when we enter the address barWhen we are, we will opendist In the directory File, then we jump to the route/login

The key is here, when we are/loginThe page is refreshed.nginx locationThere is no relevant configuration, so there will be a 404 situation

Why is there no problem in hash mode

router hashWe all know that the pattern is represented by symbols #, such as/#/login, hashThe value of#/login

Its characteristics are:hashAlthough it appears inURLbut will not be included inHTTPDuring the request, it has no effect on the server, so it changeshashThe page will not be reloaded

hashIn mode, onlyhashThe content before the symbol will be included in the request, such as/#/loginonlyWill be included in the request, so for the server, even if there is no configurationlocation, will not return a 404 error

Solution

After seeing this, I believe most students can think of how to solve the problem.

The essence of the problem is that our routes perform view switching through JS.

When we enter the subroutine, refresh the page.webThe container has no corresponding page, and then 404 will appear

So we just need to configure the redirection of any page to, hand over the route to the front-end to process

rightnginxConfiguration File.confModify, addtry_files $uri $uri/ /;

server {
  listen  80;
  server_name  ;

  location / {
    index  /data/dist/;
    try_files $uri $uri/ /;
  }
}

Remember to update the configuration after modifying the configuration file

nginx -s reload

After doing this, your server will no longer return the 404 error page, because it will be returned for all paths.document

To avoid this, you shouldVueThe application covers all routing situations, and then gives a 404 page

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

Regarding the backend configuration plan, there are also:Apache、nodejsWait, the ideas are consistent, so I won't go into the discussion here

References

  • /post/6844903872637632525
  • /topic/5f8cf91d96b2cb0032c385c0

Summarize

This is the article about the solution of the 404 error after the local development of the vue project is completed and the 404 error is reported. For more related content of vue deployment to the server, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!