Webpack vue project package generated files, resource files report 404 troubleshooting (Summary), webpackvue

Webpack vue project package generated files, resource files report 404 troubleshooting (Summary), webpackvue

Recently, when using webpack + vue for personal entertainment projects, we found that after npm run build, the path of css js img static resource files could not be found, and a 404 error was reported... I found a bunch of solutions online, which are summarized as follows:

1. First, modify the index. js file in the config directory.

Modify the configuration item assetsPublicPath of build

The purpose is to import the resource file to the relative address (relative index.html)

2. At this time, js, css, and img in html are no problem, but the background-image in css still reports 404

The cause of this problem is that after the relative address is used, the image path introduced in css is relative to the path of the css file.

In this case, modify the utils. js file in the build folder and modify the following line:

In this way, the background image in css is also OK. If the font is introduced in css, you can fix the 404 problem in this way.

Summary

The above is a small series of solutions to the webpack vue project package generated files, the solution to the 404 problem of resource files (Summary), I hope to help you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!