Solve the vue + webpack packaging path problem, vuewebpack packaging path

Solve the vue + webpack packaging path problem, vuewebpack packaging path

Recently I wrote a small vue project and didn't want to release it as a web project. So I am going to put it in the public folder of the resource project. I have encountered some minor problems. Here I will summarize it.

The resource path is as follows:

The access path configured in the public directory is "/". In this case, our access path is changed to "Domain Name/vue-demo ". No error is reported when sending the program during access, but the page is blank. There was no problem with projects that were released like this before, but what happened this time?

After careful exploration, we found that vue-router was a ghost. Because of project requirements, the rolling behavior is used. The rolling behavior must enable the history mode. in the official documentation of vue-router, the following sentence is provided:

When you use the history mode, the URL is like a normal url, such as http://yoursite.com/user/id!

However, this mode requires background configuration support. Because our application is a single page client application, if the background does not have the correct configuration, when the user directly accesses the http://oursite.com/user/id in the browser will return 404, this does not look good.

Therefore, you need to add a candidate resource on the server to cover all situations: If the URL does not match any static resources, the same index.html page should be returned, this page is the page on which your app depends.

However, the vue-router listening path is "/" and "/component", and the natural path does not match.

Therefore, we need to modify routes, add the project name ("/vue-demo") to each path, and ensure that the resource file is loaded correctly, "/vue-demo" must be added to the publicPath during packaging ".

Finished !!

The above article solves the problem of vue + webpack packaging path, which is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.