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