vue之打包图片路径相关问题解决

npm run  build

1，vue项目打包后css背景图路径不对的问题

 

当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比

图一：使用npm run dev命令访问

 

图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图

 

解决办法：

解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

publicPath:'../../'

添加位置为如下图：

 

然后重新执行 npm run build 命令，即可成功显示图片

 

 

2，vue项目打包后动态加载图片问题

 

assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖

将图片作为模块加载进去，比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]这样webpack就能将其解析。

static：在这个目录下文件不会被webpack处理，简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]

根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件。

static/images下的图片，比如images:[{src:‘./static/1.png',{src:‘./static/2.png']这样打包没有路径问题。

 

微信公号搜索：李大头头。（或扫描二维码）找我来玩。

更多【前端技术群】和【内推职位】 资源等着你。

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~