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:
'./',