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. 因爲是要打包給後臺去做接口的的，所以這裏面，我直接打包成功後發給後臺，對接數據就完事了。
   

原創說明：如需轉發，請尊重個人原創，寫明原創地址。