微信搜索superit|邀请体验:大数据, 数据管理、OLAP分析与可视化平台 | 赞助作者:赞助作者

Webpack打包生成相对路径的资源引用

前端 aide_941 24℃

Webpack打包生成相对路径的资源引用

背景

一般企业使用tomcat、weblogic等作为中间件容器,部署应用,每个应用都会有相应的上下文;比如部署应用App1,App2,那么App1对应的url就应该是

http://ip:端口/App1

部署App2,也是同理,访问路径为:

http://ip:端口/App2

然而,使用vue-cli生成的模板工程,默认的webpack配置,打包的css、js等资源,路径都是绝对的,

这样会导致 应用在开启调试期间,一切的引用都是正常的;但是当打包之后,因为生成了绝对路径的资源,当部署到带上下文的中间件的时候,就会导致资源引用失败(404):

解决方法

打开webpack.prod.conf.js

找到output:增加 publicPath: ‘./’,  即可,如图。

这样,不管是调试,还是打包应用,资源的引用路径都是正确的。

 

其他的使用webpack当构建工具的,应该也是可以这样配置的。

转载请注明:SuperIT » Webpack打包生成相对路径的资源引用

喜欢 (0)or分享 (0)