webpack打包vue项目并tomcat启动访问过程踩坑总结

webpack打包vue项目并启动访问过程踩坑总结

1. vue项目开发完毕之后，我们使用npm run build 对vue项目进行打包，然后放入到tomcat中运行，再进行地址访问。整个过程清晰明了，但是却容易遇到一些问题，第一次跑完流程，打开地址发现所有的打包的js，css全部找不到，这是为什么呢？

2. 直接打包会再项目里面打包出一个dist文件夹，里面有静态css,js文件以及外部有一个index.html,而我们放到tomcat中确是把dist里面的内容放到了webapp下面的一个自己建的文件夹（起名叫product），如图所示

3. 而我们vue项目中config/index.js里面定义的build地址里面没有这个product，故而启动程序输入localhost:8080/product 发现打包的静态文件都是404
   

4. 我第一次改成了这种，然后重新打包，发现已经找到4个js文件了，还有一个被打包的 js 迟迟搜索不到，404，仔细查看了一下network，原来是地址中的product和static中间的斜杠丢失掉了，为什么会丢失呢？
   
   
   

5. 我重新仔细想了下，觉得再配置文件中/product后面应该再加一个斜杠会不会可以呢，？ 答案是肯定的！！ ，可以完美解决这个问题，但是一定要注意，要重新的把你的打包的cmd窗口关闭再重启，否则命令缓存影响打包过程，我被这个蒙蔽了好久，一直用一个cmd去打包，本来地址配对了，却被这个问题压住了，毕竟不是Linux系统，像这种加一个扛 还是少一个斜杠的问题，其他JS都是没问题，多半就是打包器的问题，打包不能保证100%打包完整。
   

6. 因为是要打包给后台去做接口的的，所以这里面，我直接打包成功后发给后台，对接数据就完事了。
   

原创说明：如需转发，请尊重个人原创，写明原创地址。