WEBPACK+VUECLI Package Build resource relative reference path with correct reference to background picture

Resource relative Reference Path problem description

In general, by webpack+vuecli the default packaging of CSS, JS and other resources, the path is absolute.

However, when deploying to a project with a folder, this absolute path is problematic because the configured static folder is treated as a root path, so to resolve this problem, you have to refer to the relative path.

Solutions

Open itwebpack.prod.conf.js

Find output : add publicPath: ‘./‘ , can,.

Then the reference path to the resource is correct.

Of course, in the Config folder under the assetsPublicPath: ‘./‘ index.js can also be modified to achieve a relative reference to the resource.

Reference issues for background pictures

Although the above solves the resource path reference problem, but the resources inside the background picture, does not like the load resource in the ./static/js/app.js index.html, through the reference can load normally, the picture resource is loaded through the CSS, if the  background: url("../../assets/images/logo-index.png") no-repeat; relative packing becomes the url(static/img/logo-index.2f00bf2.png) no-repeat so we want to keep the normal path of the CSS reference picture, namely:

URL (.. /.. /static/img/logo-index.2f00bf2.png) no-repeat

Then you need to modify the Utils.js code under the build folder:

Add a line of code so that both the font and the picture reference problem can be resolved.

WEBPACK+VUECLI Package Build resource relative reference path with correct reference to background picture