vue打包前后图片、资源路径问题,以及动态加载图片问题

打包后css,js,文件路径问题(空白页面问题)

解决方法

  1. 打开config下index.js,修改build中assetsPublicPath: ‘./’ (即将绝对路径修改为相对路径)

vue打包前后图片、资源路径问题,以及动态加载图片问题_第1张图片

css背景图片路径问题

解决方法
打开build/utils.js,修改如下:
vue打包前后图片、资源路径问题,以及动态加载图片问题_第2张图片

随着更新,这一点已完善了,不需要修改了

assets或static目录下, img资源动态绑定问题

template中img路径动态绑定,案例如下

  
 

解决方法
方法一:使用require(),解析图片路径,加载解析后的路径。

   imgSrc:'../../static/img/1.jpg'
   //修改为
  imgSrc:require('../../static/img/1.jpg')

方法一,assets或static目录下的资源都可以

方法二: 直接使用解析后路径

   imgSrc:'../../static/img/1.jpg'
   //修改为
  imgSrc:'./static/img/1.jpg'

方法二,仅限static目录下的资源。

参考页面 https://blog.csdn.net/csdn_yudong/article/details/84936130

你可能感兴趣的:(Vue)