vue-cli dev模式下图片路径配置 和build下图片路径的配置

1.首先我们可以取个别名 images 对应 static/images目录 

然后在 build/utils.js中

function generateLoaders (){

if ( options . extract ) {

return ExtractTextPlugin . extract ({

use : loaders,

fallback : 'vue-style-loader' ,

publicPath : '../../' //加上这段代码

})

} else {

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

}

}

 

}加上publicPath:'../../'这段代码

我们就可以在img src和css背景图中用“~”的方式引用图片

例如：

 < img src = "~images/login/qrcode.png" />

 background: url( '~images/login/bg.png' ) no-repeat center;

1.当使用 不带上下文的绝对路径访问时 如：http://localhost:8080/#/login时不需要做任何配置即可正常访问

2.当使用带上下文的相对路径访问时 如 http://localhost/shine-charts/dist/#/login

只需要把config/index.js中的assetsPublicPath改成相对路径就行assetsPublicPath: './',

build : {

// Template for index.html

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

// Paths

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

assetsSubDirectory : 'static' ,

assetsPublicPath : './' ,