背景：項目中使用了react、react-router開發(fā)，在部署到nginx服務(wù)器時遇到了以下問題

history

nginx配置

如下介紹使用browser history模式部署到nginx服務(wù)器

部署到nginx根目錄

訪問路徑：http://localhost/

# nginx配置
location / {
    root   html;
    index  index.html;
    # url 切換時始終返回index.html
    try_files $uri /index.html;
}

部署到nginx子目錄

假設(shè)部署到/app目錄下，訪問路徑：http://localhost/app

# nginx配置
location /app {
    root   html;
    index  index.html;
    # url 切換時始終返回index.html
    try_files $uri /app/index.html;
}
# 圖片樣式緩存1年
location ~* /app.*\.(js|css|png|jpg)$
{
    access_log off;
    expires    365d;
}
# html/xml/json 文件不緩存
location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
{
    expires    -1;
}

// package.json
"homepage": "http://localhost/app",

// react-router路由配置
// 注意指定basename
<BrowserRouter basename='/app'>
</BrowserRouter>

開啟nginx的gzip壓縮

# 開啟gzip
gzip on;

# 啟用gzip壓縮的最小文件笨奠，小于設(shè)置值的文件將不會壓縮
gzip_min_length 1k;

# gzip 壓縮級別，1-10唤殴，數(shù)字越大壓縮的越好般婆，也越占用CPU時間
gzip_comp_level 1;

# 進(jìn)行壓縮的文件類型。javascript有多種形式眨八。其中的值可以在 mime.types 文件中找到腺兴。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

整體配置

# nginx.conf整體配置大概如下：
http {
    # 開啟gzip
    gzip on;
    # 啟用gzip壓縮的最小文件廉侧，小于設(shè)置值的文件將不會壓縮
    gzip_min_length 1k;
    # gzip 壓縮級別页响，1-10，數(shù)字越大壓縮的越好段誊，也越占用CPU時間闰蚕，后面會有詳細(xì)說明
    gzip_comp_level 1;
    # 進(jìn)行壓縮的文件類型。javascript有多種形式连舍。其中的值可以在 mime.types 文件中找到没陡。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";

    server {
        location /app {
            root   html;
            index  index.html;
            # url 切換時始終返回index.html
            try_files $uri /app/index.html;
        }
        # 圖片樣式緩存1年
        location ~* /app.*\.(js|css|png|jpg)$
        {
            access_log off;
            expires    365d;
        }
        # html/xml/json 文件不緩存
        location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
        {
            expires    -1;
        }
    }
}