What to do if the image path is wrong after vue.js is packaged

Solution to the wrong image path after vue.js is packaged: 1. Modify [assetsPublicPath: './']; 2. Open [webpack.prod.conf.js] and add [publicPath: ' in output ./'].

Solution to the wrong image path after vue.js packaging:

[Related article recommendations: vue.js】

The solution is as shown in the figure:

(1),

Modify assetsPublicPath: './'

(2), open webpack.prod.conf.js, add output: publicPath: './'

Although the resource path reference problem is solved, the background image in the resource is still not displayed, background: url( "../../assets/images/logo-index.png") no-repeat; after being relatively packaged, it becomes url(static/img/logo-index.2fbf2.png) no-repeatSo we need to keep the normal path of the css reference image, that is: url(../../static/img/logo-index.2fbf2.png) no-repeat

Then you need to modify the utils.js code in the build folder, as shown in the figure:

AddpublicPath:'../../'This line of code can solve the problem of font or picture reference.

Related free learning recommendations: javascript (video)

The above is the detailed content of What to do if the image path is wrong after vue.js is packaged. For more information, please follow other related articles on the PHP Chinese website!