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