I encountered this problem when using the command line cnpm run build to package and deploy the vue.js project. Please ask for help from the master T T
First of all, the background tomcat is configured with the Application context as xxx, so the root path of the server becomes http://localhost:8080/xxx
Now set the image to 
After packaging and deployment, the image cannot be displayed and when viewing the element, it becomes 
Error report cannot be loaded http://localhost:8080/static/...
Directly change the path to 
and it will be displayed
So how should we solve this problem before packaging?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vue-cli's scaffolding is built according to the production environment project by default, which roughly means building a project directly instead of a small module under a certain project. Therefore, ordinary websites will place static in the root directory of the website. You can open the dist directory generated after the build. The structure inside is as follows:
Then there are only two ways to solve your problem:
Modify the final resource location, such as placing static in the project root directory
Modify the reference links to resources on the page
No need to explain the first one, just move the directory location.
The second method has many methods, but it is best to achieve the goal by modifying the configuration of webpack. It is recommended that the author take a closer look at the configuration file of webpack~
When I changed assetsPublicPath to /public/, the resource link of the output index.html changed:
There is another universal method, using
string-replace-loader, which simply means matching the string and then replacing it. For detailed instructions, you can see here.Hope it helps you.
Or set the path of the image require('picture path') as the src of img. You can try this method