What are the problems with the vue+webpack packaging path?

This time I will bring you what are the problems with the vue+webpack packaging path, and what are the vue+webpack packaging paths in Shanxi i'an? NotesThe following is a practical case, let's take a look.

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, the 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 great 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 resource, the same index.html page should be returned. This page It is the page that 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! !

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the failure of font and image resources after vue packaging

How to solve the problem that the webpack font icon cannot be displayed

The above is the detailed content of What are the problems with the vue+webpack packaging path?. For more information, please follow other related articles on the PHP Chinese website!