vueAdmin專案打包

記錄在專案開發過程種出現的問題，若出現相同的情況可以快速解決該問題

在專案採取前後端開發時,例如（vue+springboot），最後前端工程要打包成靜態檔案資源給後端，然後後端控制路徑進行資源對映，但在打包過程中，有可能會出現後端無法訪問前端的靜態資源或者前端請求後端無法接收到(404 not found)。

而我最近在使用 vue-admin-template這個專案模板，前期一切順利，就是在最後打包的時候出現了上述的問題

一般出現這種情況的原因有兩種：要麼是前端出問題，要麼是後端出問題。

而我接下來從前端的角度來分析造成這種情況的原因

對於前端來說，其實出現這種情況主要由兩種原因早成的

打包時專案的根路徑沒有和後端匹配（後端無法訪問前端打包的靜態資源）

例如後端訪問該靜態資源的根路徑是『/mange/』,而前端專案的根路徑是『/』

前端請求的根路徑沒有和後端接收請求的根路徑匹配（後端無法接收前端發出的請求）

例如後端接收前端請求的根路徑是『/mange/』,而前端專案的根路徑是『/』

一般這兩個問題解決了，就差不多了。

但是如果還是後端無法訪問前端打包的靜態資源那或者前端請求後端無法接收到就有可能是後端出現了問題。

前端要和後端一起排查造成該問題的原因。

因為前端打包的工具其實是各種各樣的，他們對於專案的根路徑和請求的根路徑的處理方式都是不同的，而我接下來則以我自身的例子（我這裡是使用webpack4的，使用的專案模板是vue-admin-template）來看看具體如何解決上述情況

webpack打包會根據build/index.js進行打包,打包時的一些專案的相關配置都在build/index.js

但是我們對於專案相關配置的修改是在vue.config.js,因為build/index.js有些相關配置引用了vue.config.js的一些引數

接下來我來講講如何設定打包時專案的根路徑和前端請求的根路徑

執行打包命令：npm run build:prod（這命令本質是執行vue-cli-service build命令，這檔案是package.json檔案）

打包完成後預設在專案根目錄下產生乙個dist檔案，靜態資源都在這下面，然後把靜態資源扔給後端就可以了

本人新人，這是本人的第一篇部落格，或許寫的比較亂

若有不足，請多多指教！

面，然後把靜態資源扔給後端就可以了

本人新人，這是本人的第一篇部落格，或許寫的比較亂

若有不足，請多多指教！