首先呢，我們要有以下幾個方面的知識和操作，來實現項目部署
第一：我們要搭建nginx部署基礎環境
具體流程可參考這個鏈接從0-1超詳細教你實現前端代碼nginx部署全流程
第二：我們要知道前端路由hash和history實現以及區別
路由功能：
- 1、記錄當前頁面的狀態（保存或分享當前頁的url，再次打開該url時，網頁還是保存的（分享）時的狀態）；
- 2、可是使用瀏覽器的前進后退功能（如點擊后退按鈕，可以使頁面回到ajax更新頁面之前的狀態，url也回到之前的狀態）
hash模式和history模式實現功能：
- 1、改變url且不讓瀏覽器向服務器發出請求；
- 2、監測url的變化；
- 3、截獲url地址，並解析出需要的信息來匹配路由規則。
hash模式-url后帶#
特點：
- hash值變化不會導致瀏覽器向服務器發出請求，改變hash不會重新加載頁面
- hash改變會觸發hashchange事件，瀏覽器的進后退也能對其進行控制
- hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了
- hash的而傳參是基於url的，如果要傳遞復雜的數據，會有體積的限制
history模式-url后不帶#
特點：
- history模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。
- history———利用了HTML5 History Interface 中新增的pushState（）和replaceState（）方法
- history不支持IE8以下版本
第三：我們要知道部署需求
- 1.一個nginx部署一個靜態資源，還是部署多個靜態資源？
- 2.我們打包后路由是要使用hash模式，還是history模式？
根據不同需求進行不同打包配置以及部署,這里我以/usr/local/nginx/html這個部署路徑為例：
采用hash方式打包后，部署在nginx上
- 部署單項目，無需添加過多配置，直接把靜態資源放在這里，我們就可以使用ip+端口號訪問
- 部署多個項目在一個nginx，通過ip+端口號+文件夾名訪問
采用history方式打包（通俗來說就是你的網址后面不帶#）
這里需要進行nginx的配置
location / {
try_files $uri $uri/ /index.html;
}
- try_files 試着去訪問一下當前瀏覽所請求的頁面
- $uri 當前請求的路徑 如果找到就返回
- $uri/ 去找當前請求的路徑,去找下面的文件，如果找到了就返回
- /index.html 保底方案：如果上面兩個都沒有找到就直接返回 index.html
- root 指定了 / 對應的單頁靜態資源目錄
下面是我經常使用的nginx配置文件,送給大家作參考啦
server {
listen 80;
gzip on;
gzip_min_length 1k;
gzip_comp_level 8;
gzip_buffers 32 4k;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
gzip_vary on;
etag off;
location ^~ /github/ {
proxy_set_header Host abd.xiaojin.com;
proxy_pass https://xiaojin.com/;
}
# location ^~ /api/ {
# proxy_pass https://xiaojinaaa.com/aaa/api/;
# }
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
今天就寫到這里啦~
- 小伙伴們，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我們明天再見啦~~
- 大家要天天開心哦
歡迎大家指出文章需要改正之處~
學無止境，合作共贏
