Solve the issue of accessing pictures / icons after VUE packaging

Can we encountered npm run build After the pack, running the project on-line, the resource file (pictures, icons) does not display the question,

Next, I share with you my solution –

1. after checking package css files in dist

解决Vue打包后访问图片/图标不显示的问题

When you open the file you get dizzy, as are packaged compressed css code, but it does not matter , keyword search url

解决Vue打包后访问图片/图标不显示的问题

to check the url path match correct

after comparing amazing discovery! ! !

解决Vue打包后访问图片/图标不显示的问题

Therefore, before adding ../../ url path is OK, , but is troublesome, after each package must secondary processing it?

is not! ! !

2. The method of automatically adding the ../../

Open build / utils.js, detecting publicPath are correct, their allocation to the corresponding !

  if (options.extract) {return ExtractTextPlugin.extract ({use: loaders, fallback: 'vue-style-loader', publicPath: '../ .. / '})} else {return after [' vue-style-loader ']. concat (loaders)}  

configured, npm run build after the package will automatically match the correct path, without manually editing,

The above is the problem that the VUE package access to the picture / icon is not displayed, I hope to help everyone, if If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment