关于webpack打包的问题？

Question

这个是我的文件目录

.logo {
background: url('/static/img/hospital_logo.png') no-repeat left top;
background-size: 100% 100%;
width: 45px;
height: 45px;
display: inline-block;
margin: 8px 0 0 10px;
float: left;
}
这个是我的css背景图片路径

可是我现在打包之后这些图片依旧不能显示，但是我本地运行可以。。

求大神告知我怎么改才能都能用

Answer 1

background-image:url('...')写在标签上上试试

Answer 2

• 确定 static 目录已经被打包到了 ./dist 目录下，否则检查 webpack 的配置；
• 打包后的代码需要在一个 WEB 服务器上查看，直接打开是无效的；
• /static/*** 和 static/*** 实际访问的时候是不一样的，前者适合域名访问，后者适合各种格式访问。

假设域名为：http://127.0.0.1/，那么 http://127.0.0.1/static/*** 可正常显示。
但如果，你的域名是 http://127.0.0.1/app/，那么 http://127.0.0.1/app/static/*** 访问出错。

暂时想到 3 个解决方案：

• 直接放到线上服务器不存在该问题的，因为线上一般都是顶级（如：domain.com）或二级域名（如：admin.domain.com）;
• 本地预览时，如 Apache，你可以试试 VirtualHost 虚拟主机配置;
• 本地预览时，修改 ./dist/index.html，添加 <base href="http://127.0.0.1/app/" /> 语句,参考 HTML <base> 标签；