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'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

B-2,找到 build->utils.js里面，如下修改

if (options.extract) {

return ExtractTextPlugin.extract({

publicPath: '../../', //增加这一句.作用于css背景图background

use: loaders,

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

B-1和B-2的作用如下:

image.png

至此,ok了么?

再补充了个注意点

不要用给webpack.base.conf.js添加publicPath: '../../'的方法,因为会同时作用于img和css路径,从而出现问题

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

// publicPath: '../../', //这里不能加,不然会导致img和背景图background都引入前缀,从而img路径失效

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

--by Affandi ⊙▽⊙