react router项目部署nginx 配置问题
首页 > >    作者:lininn   2019年4月25日 14:56 星期四   热度:676°   百度已收录  
时间:2019-4-25 14:56   热度:676° 

history

history url样例 特点
hash history /#/user/profile 不需要服务器支持
browser history /user/profile react-router官方推荐,需要服务器支持(因为是SPA项目,url切换时需要服务器始终返回index.html)

nginx配置

如下介绍使用browser history模式部署到nginx服务器

部署到nginx根目录

访问路径:http://localhost/

# nginx配置 location / {
    root   html;
    index  index.html; # url 切换时始终返回index.html try_files $uri /index.html;
} 

部署到nginx子目录

假设部署到/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压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间 gzip_comp_level 1; # 进行压缩的文件类型。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压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明 gzip_comp_level 1; # 进行压缩的文件类型。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;
        }
    }
} 

二维码加载中...
本文作者:lininn      文章标题: react router项目部署nginx 配置问题
本文地址:?post=336
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn