After the project is developed, it is ready to be packaged. Because the path of the hash mode with # looks a bit ugly, the history mode is adopted. Because this project is a previous website reconstruction, but a SEO problem, some previous address paths need to be written, so all the vue-router paths have been re-changed. After packing, I checked a lot of things on the Internet, and they all said that I wanted to put the build in the config
assetsPublicPath: '/' changed to './', and it was found that it was fine in hash mode when packaged and launched.
But once it is changed to history mode, the paths of some dynamic js files are all wrong. In desperation, he tried to deal with the './' back to the '/' history mode
I packed it up again and went online. I found that it was normal to click and jump to the page, and I was a little excited. But the common problem of history mode is that it cannot be refreshed.
Because it turns out that the jump is not actually done by requesting the server, but by changing the address through the js operation history API.
When you refresh, the browser straightforwardly requests the server, but the server does not have this route, so it is 404.
Solution 1:You can be a proxy to allow all addresses to return to the same entry file. (Recommended use)
Solution 2:Use static files to make each directory exist and there will be no errors
Our server uses nginx. I don’t know how to do it. I just used nodejs and express to build a simple server, and used the official recommended middleware
connect-history-api-fallback
How to use:
Introduced in server files
var history = require('connect-history-api-fallback');
Then inappBind middleware before binding route，
(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/' }//This is the correct way]}));
I'm starting
(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/' }
]
}));
In this way, it is normal to refresh, but there is always an "/" behind the path, which looks very strange, so I tried to change it to the current html file and found that it is really OK. From then on, the work was done.
The above article briefly talks about the pitfalls encountered in the history mode after the vue project 4rs vue-router was launched. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.