Recently I discovered a problem with the packaging path through vue+webpack

Below I will share with you an article that solves the problem of vue webpack packaging path. It has a good reference value and I hope it will be helpful to everyone.

I recently wrote a small vue project. I didn’t want to publish it as a separate web project, so I planned to put it in the public folder of the resource project. I encountered some minor problems, so I’ll summarize them here.

The resource path is as follows:

The access path configured in the public directory is "/", in this way In this case, our access path becomes "domain name/vue-demo". When accessing the program, no error was reported, but the page was blank. There were no problems with projects released in this way before, but what happened this time?

After careful exploration, I found that vue-router was causing trouble. Due to the needs of the project, scrolling behavior is used. The scrolling behavior must turn on the history mode. There is such a sentence in the vue-router official document:

##When you use history mode, the URL is just like a normal URL, such as http://yoursite.com/user/id, which looks good too!

However, to play well in this mode, you need background configuration support. Because our application is a single-page client application, if the background is not configured correctly, when the user directly accesses http://oursite.com/user/id in the browser, 404 will be returned, which is not good-looking.

So, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resources, it should return the same index.html page, which is the page your app depends on. .

The paths monitored by our vue-router are still "/" and "/component", and the natural paths do not match.

So we need to modify routes and add the project name to each path, that is, "/vue-demo". At the same time, in order to ensure that the resource files are loaded correctly, the publicPath during packaging also needs to add "/vue-demo" ".

complete! !

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement random switching code of WeChat ID through JavaScript (detailed tutorial)

Using ES6 through WeakMap Solve the memory leak problem (detailed tutorial)

Use vue element-ui ajax technologies to implement an instance of a table

The above is the detailed content of Recently I discovered a problem with the packaging path through vue+webpack. For more information, please follow other related articles on the PHP Chinese website!