資訊專欄INFORMATION COLUMN
摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。
目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才不至于返回404。
nginx 部署一個單頁應用很簡單： location / {
root html;
try_files $uri /index.html index.html;
}
root是web服務器目錄，try_files 為文件匹配，先找真實的地址($uri)，如果找不到，再找index.html文件。
#此處注意，history模式不可以使用相對位置引入方式（./）
但如果幾個單頁應用同時需要部署在同一臺電腦上，并且都需要占用80或者443端口，就不太容易了。
介紹2種相同ip端口部署多個單頁應用（前端路由）的方法。
使用子域名區分，此種方法最是簡單。但是限制也大，必須要買域名，或者修改訪問者電腦的hosts文件。
server {
listen 80;
server_name aa.gs.com; #子域名aa訪問時
localtion / {
root E:/ee; #windows 路徑，E盤下面ee文件為aa.gs.com的服務器目錄。
try_files $uri /index.html index.html;
}
}
server {
listen 80;
server_name bb.gs.com; #訪問子域名bb時。
location / {
root /root/bb; # linux /root/bb文件夾作為服務器目錄。
try_files $uri /index.html index.html;
}
}
采用路徑的第一個文件夾名字作為區分。例如：https://aa.com/a/xx 與 https://aa.com/b/xx。采用a與b作為區分，分別表示不同的項目。
需要設置點：
前端打包后的文件引用地址，需要加上"/a/" "/b/"為前綴 。比如 (webpack 為設置publicPath: "/a")
前端的路由路徑必須加上/a/前綴：比如真正地址test.com/ss,需改成test.com/a/ss
server {
listen 80;
root /root/test; #web服務器目錄；
location ^~ /a/{
try_files $uri /a/index.html; #如果找不到文件，就返回 /root/test/a/index.html
}
location ^~ /b/{
try_files $uri /b/index.html; #如果找不到文件，就返回 /root/test/b/index.html
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53279.html
摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。 目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才...
摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。 目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才...
摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。 目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才...
摘要：怎么做前后端的分離我目前的做法是將作為一種服務存在，僅需要提供接口即可，前端目前采用，調用后端，解析數據，靜態頁面。采用，充當層，前后端實現了真正的分離，但還是有點問題的。 什么是前后端分離 對于這個問題，其實可以看看我的學習歷程，我覺得很好的體現了Web開發模式的演化。 石器時代：那正是本人剛學JSP的時候，寫了一個簡單的商城DEMO，所有的業務邏輯，數據庫的交互以及Javascri...
閱讀 797·2023-04-25 22:57
閱讀 3051·2021-11-23 10:03
閱讀 613·2021-11-22 15:24
閱讀 3156·2021-11-02 14:47
閱讀 2901·2021-09-10 11:23
閱讀 3115·2021-09-06 15:00
閱讀 3936·2019-08-30 15:56
閱讀 3322·2019-08-30 15:52
