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当构建工具的，应该也是可以这样配置的。