解决Vue打包后图片和图标无法显示的问题

简介：
本文介绍了在使用Vue框架进行开发时，项目打包完成后遇到的图片和图标资源未正确加载的问题及其解决方案。 大家是否遇到过使用 `npm run build` 打包后，在线项目中的资源文件（如图片、图标）无法正常显示的问题？接下来我将分享我的解决方法。 1. 检查打包后的 `dist` 文件夹内的 CSS 文件。 - 这些文件通常会被压缩，所以看起来会比较混乱。不过不用担心，只需搜索关键字 url 并检查路径是否正确。 - 经过对比发现，在某些情况下需要在 URL 路径前添加 ../../ 才能解决问题。 2. 实现自动添加 ../../ 的方法： - 请打开 `build/utils.js` 文件，并查看 `publicPath` 变量的值。如果配置不正确，可以手动调整为合适的路径。 ```javascript if (options) { ``` 以上是解决资源文件加载问题的一种有效方式。