詳解nginx過濾url實(shí)現(xiàn)前臺(tái)js的配置問題
我們?cè)陂_發(fā)的過程中,可能需要一些配置,這些配置可能就是僅僅為了開發(fā)的方便,比方說,訂單過期時(shí)間,生產(chǎn)環(huán)境需要半小時(shí)失效,但是真正開發(fā)時(shí),我不可能等上個(gè)半小時(shí),所以這個(gè)時(shí)間這個(gè)失效時(shí)間我們會(huì)寫在配置文件中,這樣開發(fā)環(huán)境和生產(chǎn)環(huán)境各一套配置,來回切換很方便的.
基于摘要里的,在Java后臺(tái)實(shí)現(xiàn)很方便,只需要讀取properties配置文件即可
但是在前臺(tái)js,js是在瀏覽器里執(zhí)行的,無法讀取服務(wù)器上的配置,除非請(qǐng)求后臺(tái),但是每次的開銷也是挺大的,所以這個(gè)想法被ps了
這時(shí)候可以利用nginx,前臺(tái)靜態(tài)頁面是部署在nginx中,所以我們可以配置nginx過濾某個(gè)js的url,然后指向我們需要的文件
前臺(tái)代碼
index.html
<!-- 即配置文件 -->
<script src="/config.js"></script>
<!-- 動(dòng)態(tài)加載js -->
<script type="application/javascript">
if (config.devMode == 'dev') {
loadJs("開發(fā)環(huán)境的js");
} else {
loadJs("開發(fā)環(huán)境的js");
}
function loadJs(url, callback) {
// 實(shí)現(xiàn)
}
</script>
配置文件(生產(chǎn)環(huán)境配置和開發(fā)環(huán)境的配置在不同路徑下,但是文件名同名)
var config = {
// 或者 prd
devMode: 'dev',
// 還可以配置請(qǐng)求后臺(tái)的url前綴
serverUrl: 'http://dev.company.com'
// serverUrl: 'http://api.company.com'
}
nginx的配置
server {
listen 80;
server_name www.company.com;
location / {
root /Users/sunhao/Documents/company/project;
index index.html;
try_files $uri $uri/ /index.html;
expires -1;
}
}
server {
listen 80;
server_name debug.company.com;
location / {
root /Users/sunhao/Documents/company/project;
index index.html;
try_files $uri $uri/ /index.html;
expires -1;
}
location ~ .flower\.js$ {
root /Users/sunhao/Documents/company/project/js;
}
}
前一個(gè)server配置的是生產(chǎn)環(huán)境,正常配置
后一個(gè),過濾flower.js,定向到另外一個(gè)文件夾下
訪問www.company.com就是正式環(huán)境
訪問debug.company.com就是開發(fā)環(huán)境了
這樣就可以實(shí)現(xiàn)配置的功能了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 解決nginx+lua搭建文件上傳下載服務(wù)問題
- Nginx配置React項(xiàng)目Url后直接輸入路由路徑時(shí)報(bào)404問題的解決
- nginx配置引發(fā)的403問題解決辦法
- nginx服務(wù)器通過配置來解決API的跨域問題
- Nginx中worker connections問題的解決方法
- windows下nginx的安裝使用及解決80端口被占用nginx不能啟動(dòng)的問題
- nginx服務(wù)器配置解決ajax的跨域問題
- 利用nginx解決跨域問題的方法（以flask為例）
- Nginx解決轉(zhuǎn)發(fā)地址時(shí)跨域的問題
- nginx常見問題整理和解決辦法
相關(guān)文章
寶塔里nginx自動(dòng)停止的解決方法(檢測(cè)腳本實(shí)現(xiàn)每分鐘檢測(cè)并自動(dòng)啟用)
nginx突然停止的原因有多種,這里不列舉,可以排查具體原因,這里主要為大家分享nginx服務(wù)的檢測(cè)腳本,達(dá)到自動(dòng)啟用的實(shí)現(xiàn)2025-02-02
本文主要介紹了Nginx常見的幾種回源方式實(shí)現(xiàn),通過Nginx回源文件至本地機(jī)房,域名解析采用內(nèi)外網(wǎng)單獨(dú)解析,外地辦公同事可以通過CDN進(jìn)行更新,感興趣的可以了解一下2024-02-02
GZIP就是將文件壓縮傳輸，圖片、視頻、大文件不建議使用壓縮，壓縮需要占用你的服務(wù)器資源，壓縮完效果也不大，今天通過本文給大家如何用好Nginx的gzip指令，感興趣的朋友一起看看吧2022-05-05
使用Nginx作為Web緩存服務(wù)器,能有效減少數(shù)據(jù)傳輸、節(jié)省網(wǎng)絡(luò)流量、加快響應(yīng)速度、減輕服務(wù)器壓力、提高服務(wù)端可用性,本文就來介紹一下nginx配置文件不使用緩存的方法,感興趣的可以了解一下2024-11-11
配置nginx訪問本地靜態(tài)資源,本地圖片,視頻教程
文章介紹了如何配置Nginx以訪問本地靜態(tài)資源、圖片和視頻,首先,進(jìn)入Nginx安裝目錄并打開`nginx.conf`文件,添加一個(gè)新的`server`配置來指定本地路徑,然后,通過命令行重啟Nginx服務(wù)以應(yīng)用更改,最后,通過瀏覽器訪問配置的圖片路徑來驗(yàn)證配置是否成功2025-01-01
這篇文章主要介紹了nginx 基本配置與參數(shù)說明詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
nginx配置wss協(xié)議的實(shí)現(xiàn)
本文主要介紹了nginx配置wss協(xié)議的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Nginx出現(xiàn)403錯(cuò)誤,應(yīng)該如何解決
這篇文章主要介紹了Nginx出現(xiàn)403錯(cuò)誤,應(yīng)該如何解決？具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了服務(wù)器nginx權(quán)限被拒絕解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Nginx搭建負(fù)載均衡集群的實(shí)現(xiàn)
這篇文章主要介紹了Nginx搭建負(fù)載均衡集群的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03