vue包部署在tomcat上，解决资源路径问题

_{前端部署步骤}

现在是本地的部署步骤，本地部署是为了测试下包部署的资源引用是否正确。

1.首先执行npm run build ,build出的包是dist文件夹：

2.然后我把包传入了公司内网，哈哈，我是外网开发，内网部署。

在D:\code\IEDS-inner\dist目录下执行命令： jar -cvf ieds.war *

这一步是将build出的前端包大包成tomcat自动解压的war包。
3.把ieds.war放入D:\apache-tomcat-8.0.50\webapps目录下。
4.在D:\apache-tomcat-8.0.50\bin路径下运行startup.bat，双击就行了，这个时候会解压出ieds这个文件夹。

5.这个时候访问本地的http://localhost:8080/ieds就可以了

出现的问题——资源引用不正确

 我这个是vue-cli，webpack构建的工程。build文件的配置和vue-cli拉下来的包是一样的。

 默认打包的css、js等资源，路径都是绝对的。

如果部署是放在webapps/ROOT，然后直接访问根目录http://localhost:8080就可以。所有资源按照路径都可以找到。但是标准的应该放在ROOT同级目录，就是我上面步骤中说的。

这样我们需要访问的是http://localhost:8080/ieds，就会出现css资源、js资源或者图片资源引用不正确，导致界面出不来。

打开控制台可以看到引用路径是：http://localhost:8080/static/css/app.7856a6cdfa67d57a9e362325348f2e4a    404 not fond,类似这种错误，就是资源引用相对路径不对啦。

解决方法

修改build下的utils，在generateLoaders方法里面加个publicPath节点，如截图所示，这个地方的路径写法根据实际情况来写。

然后，光着一步还是没有解决，于是我接着找啊找啊，发现还需要在webpack.pro.config.js文件中的output对象中加上publicPath：

改完这些我重新打包了，重新部署，再访问http://localhost:8080/ieds就成功啦，重定向到我设置的Login界面了。

 

参考资料：

https://www.cnblogs.com/jzm53550629/p/8041200.html

https://www.cnblogs.com/moqiutao/p/7496718.html

他们两个写的比较详细，解决了我的问题，谢谢～～