快捷導(dǎo)航

詳解nginx過濾url實(shí)現(xiàn)前臺(tái)js的配置問題

更新時(shí)間：2017年01月23日 09:54:56 作者：Crazy_Coder

本篇文章主要介紹了nginx過濾url實(shí)現(xiàn)前臺(tái)js的配置問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

我們?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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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常見的幾種回源方式實(shí)現(xiàn),通過Nginx回源文件至本地機(jī)房,域名解析采用內(nèi)外網(wǎng)單獨(dú)解析,外地辦公同事可以通過CDN進(jìn)行更新,感興趣的可以了解一下
2024-02-02
Nginx的gzip指令使用小結(jié)
GZIP就是將文件壓縮傳輸，圖片、視頻、大文件不建議使用壓縮，壓縮需要占用你的服務(wù)器資源，壓縮完效果也不大，今天通過本文給大家如何用好Nginx的gzip指令，感興趣的朋友一起看看吧
2022-05-05
nginx配置文件不使用緩存的方法
使用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ì)介紹
這篇文章主要介紹了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)限被拒絕解決案例
這篇文章主要為大家介紹了服務(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