快捷導(dǎo)航

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

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

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

我們在開發(fā)的過程中,可能需要一些配置,這些配置可能就是僅僅為了開發(fā)的方便,比方說,訂單過期時間,生產(chǎn)環(huán)境需要半小時失效,但是真正開發(fā)時,我不可能等上個半小時,所以這個時間這個失效時間我們會寫在配置文件中,這樣開發(fā)環(huán)境和生產(chǎn)環(huán)境各一套配置,來回切換很方便的.

基于摘要里的,在Java后臺實現(xiàn)很方便,只需要讀取properties配置文件即可

但是在前臺js,js是在瀏覽器里執(zhí)行的,無法讀取服務(wù)器上的配置,除非請求后臺,但是每次的開銷也是挺大的,所以這個想法被ps了

這時候可以利用nginx,前臺靜態(tài)頁面是部署在nginx中,所以我們可以配置nginx過濾某個js的url,然后指向我們需要的文件

前臺代碼

index.html

<!-- 即配置文件 -->
<script src="/config.js"></script>
<!-- 動態(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) {
    // 實現(xiàn)
  }
</script>

配置文件(生產(chǎn)環(huán)境配置和開發(fā)環(huán)境的配置在不同路徑下,但是文件名同名)

var config = {
  // 或者 prd
  devMode: 'dev',
  // 還可以配置請求后臺的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;
  }
}

前一個server配置的是生產(chǎn)環(huán)境,正常配置

后一個,過濾flower.js,定向到另外一個文件夾下

訪問www.company.com就是正式環(huán)境

訪問debug.company.com就是開發(fā)環(huán)境了

這樣就可以實現(xiàn)配置的功能了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: