​

As we all know, there are two modes of routing in VUE: Hash mode and history mode. I also tried the history mode, but when the project was launched, EVERY time I refreshed nginx after the project was launched, 404 error was reported. Finally, I searched online and tried again, but failed to solve the problem. In the end, I tearfully switched back to hash mode, but looking at a long string of urls with an eye-catching # sign, it was very ugly, but the 404 was not refreshed in Hash mode. Finally, I also found a solution with the help of a senior, thank the senior @ Yiluxian deng.

In hash mode, the url before and after the background request is still present in this request, so each request returns an index.html page, leaving the routing to the front end. For example, if your page is www.newurl.com/home and you use history, the router in your egg does not have this interface, so it will return 404 directly after refresh. More in the request there are some ways to put the route to the front end processing, so we in the background configuration of the route configuration transaction by the front end to deal with, I give the following two processing methods.

1. Use hash mode

Switching the hash mode is easy, just change mode to ‘hash’ in line 63 of the vue routing configuration file​

2. Use history mode to configure nginx

Switching the hash mode to history is the same as switching the hash to history, but that’s just the first step.

​

I’m using the pagoda panel. Use the pagoda. Step 2: Put the static resources of the egg directly in the public folder of the app.

​

The first is the config.default.js folder in the config file. Point to where you put the static page. If you did it correctly, just copy it

​

config.static = { prefix: '/', dir: [path. Join (__dirname, '.. / app/public/dist), / / upload a file directory path. The join (__dirname, '.. / dist ') / / placed front after packaging file]}Copy the code

The second configuration redirects the router to index.html, which is the front page

​

The third part is configuring Nginx. Using the pagoda, nginX configuration is very convenient. After trying a circle, I found that the method given by vue official website is very correct

location / {
  try_files $uri $uri/ /index.html;
}
Copy the code

Under the default configuration file for this domain name

​

Restart nginx (must restart, do not restart the effect of the configuration of nginx is best not to configure a restart), generally just registered the pagoda will let you download nginx, put it in the pagoda home page, one button restart.

If you’re using a database, use nginx to reverse proxy egg’s http://localhost:7001, restart ngxin again, and pm2 restart (pM2 is an administrative tool that manages egg project startup, To use PM2, you need to write the corresponding startup file in the egg (you can search for it yourself), and then you’re done.

​

Visit the page again, how to refresh will not be a problem, there is no ugly # on the URL, refreshing a lot

​

\

​