关于webpack打包的问题?

uncleMrWang
  • 41

clipboard.png
这个是我的文件目录

.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背景图片路径

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

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

回复
阅读 640
2 个回答

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

  • 确定 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> 标签
你知道吗?

宣传栏