vue-cli中打包图片路径错误的解决方法

首次接触vue-cli构建项目时，可能会遇到图片路径错误的问题。本文将为你如何解决这个问题，并分享一些有价值的经验。

当你在使用vue-cli构建项目并尝试部署到服务器上时，可能会遇到图片加载不出来的情况。这通常发生在将项目部署到服务器的根目录或子目录下时。

一、部署到服务器根目录的情况

你需要找到项目中的config文件夹下的index.js文件。

在index.js文件中，你可能会看到类似这样的代码：`assetsPublicPath: '/'`。这是设置应用的基础公共路径。如果你的项目是直接部署在服务器的根目录下，那么你需要将这个路径改为相对路径。这样可以确保图片和其他静态资源能够正确地被加载。

二、部署到服务器子目录的情况

-

除了部署到根目录，有时我们可能需要将项目部署到服务器的子目录下，例如`../munity/dist`。在这种情况下，除了上述修改外，你还需要关注路由的设置。

你需要修改router文件夹下的index文件。具体的修改方式可能会根据你使用的路由库而有所不同，但你需要确保路由的基路径与你的项目在服务器上的位置相匹配。这样，当你的项目被部署到子目录下时，用户访问的页面才能正确地加载相关的图片和资源。

完成上述设置后，使用`npm run build`命令打包你的项目，然后将打包后的文件放到服务器相应的文件夹下，这样图片就能正常显示了。

本文分享的内容就到这里结束了，希望对你有所帮助。如果你还有其他关于vue-cli或前端开发的疑问，欢迎多多交流。也请大家多多支持狼蚁SEO，一起学习和进步。

注：本文所涉及的图片和代码示例仅为示意，可能与实际使用中的情况有所不同。请根据实际情况进行相应的调整。