nginx過濾url實現前臺js的配置問題

• 基於摘要裏的,在Java後臺實現很方便,只須要讀取properties配置文件便可
• 可是在前臺js,js是在瀏覽器裏執行的,沒法讀取服務器上的配置,除非請求後臺,可是每次的開銷也是挺大的,因此這個想法被ps了
• 這時候能夠利用nginx,前臺靜態頁面是部署在nginx中,因此咱們能夠配置nginx過濾某個js的url,而後指向咱們須要的文件
• 前臺代碼

index.html
<!-- 即配置文件 -->
<script src="/config.js"></script>
<!-- 動態加載js -->
<script type="application/javascript">
    if (config.devMode == 'dev') {
        loadJs("開發環境的js");
    } else {
        loadJs("開發環境的js");
    }

    function loadJs(url, callback) {
        // 實現
    }
</script>

• 配置文件(生產環境配置和開發環境的配置在不一樣路徑下,可是文件名同名)

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配置的是生產環境,正常配置
- 後一個,過濾flower.js,定向到另一個文件夾下

• 訪問www.company.com就是正式環境
• 訪問debug.company.com就是開發環境了
• 這樣就能夠實現配置的功能了