Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to remove vue #", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to remove #" this article.

1. For the vue project, the routes you see in the browser are all with #. If you want to remove #, we can use the history mode of routing, which makes full use of history.pushState API to complete the URL jump without reloading the page. Just add a line of code to the routing table: use the mode:'history' attribute and add mode:'history' to the routing code.

2, build later deployed to the server, there will be a refresh page reported 404 error, looking at some information and the official vue history mode configuration method to try, I thought it would be OK to configure it, the result …

My website is built by Aliyun Virtual Machine + nginx+tomcat. In the configuration file of nginx, the configuration for removing # is as follows (the website is running normally):

Initial configuration 1

In this case, I changed the route of vue to history mode, and the # in the address was removed, but there will also be the error of refreshing page Times 404. the front-end route was handed over to the back end to be processed, resulting in a mismatch of mapping.

Official nginx solution

The above is the official nginx solution, so I modify the domain name configuration file of nginx, and the result is as follows:

Update profile 1

After restarting the nignx service, the test results show that the home page can be accessed when I prohibit fetching from the cache, but all static resources cannot be accessed.

Static resources cannot be accessed

The try_files property checks the existence of the file sequentially, returning the first found file. The slash at the end is represented by the folder-$uri/. If all the files cannot be found, an internal redirect is performed to the last parameter.

Index.html should have been found, but why can't the static file be found? Later I changed the configuration to configure static files and index.html addresses to the root directory of the domain name (how is this different from configuring address jump 8082? Ask the great god to solve the problem.

Change the configuration, remove 8082 of proxy_pass, and add root and index attributes, as shown below:

Update profile 2

As a result, there was no question on the home page.

403 access prohibited

Generally speaking, nginx 403 Forbidden errors indicates that you are requesting a resource file but nginx does not allow you to view it.

Forbidden is just a HTTP status code, like 404200 is not a technical error.

Which scenarios need to return a 403 status code?

1. A website forbids specific users from accessing all content, for example, a website blocks access to a certain ip.

two。 Visit a directory that forbids directory browsing, for example: access the directory after setting autoindex off.

3. Users access files that can only be accessed by the intranet.

The above common scenarios require a return of 403 Forbidden.

I infer that it should be due to the fact that the directory in the configuration is not allowed to access. Update nginx.conf starts the user to replace the root restart nginx attempt, and both the home page and static resources are accessed successfully. Is there a security risk in this configuration? ) but the background api access reported error 404. In this way, I realized that I had gone further and further on the wrong road. My domain name pointed to the front-end home page, but my domain name also needed me to point to the back-end service, but after I used the proxy to point the domain name to the back-end service, all my previous attempts would not work.

If I use the nginx agent, I should no longer configure it at the nginx. I need to modify it on the tomcat or application behind the nginx. (maybe the design of my project is rather strange. I put the vue packaging directory and the background springboot packaging directory together. The front page and background page are both the same html.)

1. In view of the particularity of my project, I retweet 404 status in the application without changing the project structure.

The specific code is as follows:

Index home page forwarding

After testing, although the page visited during the refresh is still reported as 404, but the "page" can be reloaded to achieve the "refresh page".

The page loaded successfully, network reported 404

2. In the spirit of seeking knowledge, I separated the front and rear of the project, redeployed it, and tried to verify it with the try_files attribute.

The result is the same as the central foreground phenomenon, except that the network state becomes 304.

The page is loaded successfully, and the network display is 304.

The result of disabling caching is as follows:

When caching is disabled, the status code 200

At this point, my problem has been solved perfectly!

Originally here is a small pit, because of their own reasons to turn this small pit into a big pit. Although the process of solving the problem seemed a little silly, I finally figured out what my problem was: the difference between front and rear merging and separation, and don't confuse it.

The above is all the content of the article "how to remove vue #". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.