vue获取服务器路径图片显示,vue img图片路径和背景图片路径打包问题

当项目需要放到服务器子目录时候,会遇到这个图片打包问题,

处理方法有两个:#A和#B

#A 给所有资源配置相对路径'/'.

A-1,找到 config->index.js里面，如下修改

//举个栗子,当前服务器路径/访问路径是 127.0.0.1/wap/other/index.html

//打包资源路径都用相对路径'/' ,这样就可以解决了.

index: path.resolve(__dirname, '../wap/other/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../wap/other'),

assetsSubDirectory: 'static',

assetsPublicPath: '/wap/other/',

A-1的作用如下:

image.png

#B 给所有资源对应配置路径'../../'和'./',

B-1,找到 config->index.js里面，如下修改

//这里让页面上打包成的css/js和img标签src的路径都带上 ./ ,但会影响到css背景图路径,所以需要第二步配置

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'