前端打包后要部署到服務器，在瀏覽器中可以通過url訪問到我們開發的系統，通過nginx代理在工作中是一種很常用的方式。
這里以本地為例，把本地電腦當作一個服務器，實現普通部署、帶特定前綴等
前端使用vue-cli+vue作為例子
以下內容都只解決在不同情況下請求前端打包文件404問題，如果在index.html中有引入public下的靜態資源，可以使用**<%= BASE_URL %>**來代替相對路徑或絕對路徑,<%= BASE_URL %>對應的就是vue.config.js中publicPath
1.hash路由+不帶前綴的普通部署
效果如下：地址為ip:port/#/hashPath形式(因為用的是默認的端口80所以可以不寫端口號)
這種是最簡單的部署方式。部署時不使用任何前綴，且前端使用的hash路由模式，不用擔心后面訪問資源404問題。
配置：
- 前端vue.config.js配置中不配置publicPath或者設置
publicPath:'/'。對應的如果使用webpack.config.js，不設置output.publicPath或者設置為’/'。 - 打包生成dist文件，放到任意自己期望的目錄下面
- 配置nginx
示例：
其中：
location：nginx的塊級指令，用來匹配url請求。這里我們打算把前端部署在不帶前綴的地址上，故直接使用 / 。關于location更多的配置可以參考https://zhuanlan.zhihu.com/p/137042956?utm_id=0
root:用于指定文件系統中某個目錄作為請求的根目錄（還有一個alias與其類似，后面解釋）
index: 用于指定網站初始頁 默認值為index index.html后面可以跟多個值用 空格 隔開，更多配置和解釋可以參考官網/其他
2. hash路由+特定前綴
效果如下：地址為ip:port/prefixPath/#/hashPath形式
配置方式1：
-
前端打包配置publicPath設置為 ./
./代表當前目錄下，這樣設置可以適配在不同環境下想要為系統設置不同前綴的問題，不論設置什么前綴都能正確匹配
-
打包生成dist文件，放到任意自己期望的目錄下面
-
配置nginx：示例：
alias:用于將請求映射到另一個目錄或文件上(用于將請求的URL路徑與文件系統路徑進行映射)
alias和root的區別：
如果上面仍然使用root訪問url時得到的結果將是404 Not Found
root: 指定文件系統中某個目錄作為請求的根目錄，Nginx會在該目錄下尋找請求的文件,最后請求的路徑為root指定的URL + location上的URL
alias:將請求映射到另一個目錄或文件上,最后請求的路徑為alias指定的URL,即loaction后面的路徑將被忽略。
配置方式2：
如果部署的前綴固定，可以設置publicPath為固定路徑
-
配置publicPath為固定地址（這個地址必須和nginx配置的location 后面的url路徑保持一致）
-
同配置方式1
-
同配置方式1
3.history模式
history模式相對hash模式配置要更加復雜，稍微不注意可能就會出現404
publicPath的幾種配置
1. ‘./’ 表示 與當前路徑處于同一級
1.1 瀏覽器地址為localhost/tenant-mgt/ （注意是以/結尾的） 則跟tenant-mgt/同級，相當于是tenant-mat的下一級，因為tenant-mgt后面有一個/
這情況下請求的地址為：
1.1 那如果此時tenant-mgt/ 中/后面還有一個路徑呢 如loacalhost/tenant-mgt/index 那么上面vue.min.js的請求地址是什么？
答案是和上面一樣，即還是loacalhost/tenant-mgt/vendor/vue.min.js 因為和index同級就是相當于tenant-mgt的后面一級
1.2 那如果tenant-magt后面沒有/呢，即localhost/tenant-mgt。這個時候./和/tenant-mgt同級即loaclhost/這一級
則請求的地址就變成了loacalhost/vendor/vue.min.js
所以最后是不是以 / 結尾很重要
- ‘/’表示絕對地址，無論部署的地址和瀏覽器中顯示的地址是什么，請求靜態文件的地址都是根路徑
3.1history模式+不帶固定前綴
1.前端打包配置publicPath為 ‘/’(重要，這里不能設置為相對地址，否則js等文件請求將會帶上瀏覽器url上面的地址，導致請求404）
2.nginx配置為
location / {root D:\frontend\console\dist(前端打包路徑);index index.html index.htm;try_files $uri $uri/ /index.html（必須，否則刷新時會404）;
}
例：下圖中/login是訪問系統后跳轉到的路由路徑
3.1history模式+固定前綴
假設我們需要部署的地址的前綴是/test
1.設置路由的base值為/test
2.設置publicPath為 /
3.nginx配置
location / {root D:\frontend\console\dist(前端打包路徑);index index.html index.htm;
}
