nginx安装和配置【支持Vue】

nginx安装和配置【支持Vue】

https://www.runoob.com/linux/nginx-install-setup.html

nginx安装

• 安装编译工具及库文件

• 安装 PCRE：PCRE 作用是让 Nginx 支持 Rewrite 功能。

• 安装 Nginx

• 查看nginx版本

  /usr/local/webserver/nginx/sbin/nginx -v
  

nginx配置

创建 Nginx 运行使用的用户 www：

[root@bogon conf]# /usr/sbin/groupadd www 
[root@bogon conf]# /usr/sbin/useradd -g www www

配置nginx.conf ，将/usr/local/webserver/nginx/conf/nginx.conf替换为以下内容

user  www www;
worker_processes  1;
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events {
    use epoll;
    worker_connections  65535;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    
    server_names_hash_bucket_size 128;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 8m;
    #access_log  logs/access.log  main;

    sendfile        on;
    tcp_nopush     on;
    keepalive_timeout  60;
    tcp_nodelay on;
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k;
    gzip on; 
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml;
    gzip_vary on;

    #gzip  on;
    #limit_zone crawler $binary_remote_addr 10m;
    #下面是server虚拟主机的配置
    server {
        listen       80;
        server_name  localhost;

        index index.html index.htm index.php;
        root /usr/local/webserver/nginx/html;#站点目录
        location ~ .*\.(php|php5)?$
        {
            #fastcgi_pass unix:/tmp/php-cgi.sock;
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            include fastcgi.conf;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
        {
            expires 30d;
            # access_log off;
        }
        location ~ .*\.(js|css)?$
        {
            expires 15d;
            # access_log off;
        }

        location / {
            try_files $uri $uri/ @router;
            index index.html;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }
        access_log off;
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

vue页面刷新出现 404 Not Found nginx【nginx中添加如下代码不会出现问题】

查找资料是因为：url地址是虚拟的，不是真实存在的，包括页面也是js控制，所以刷新就找不到文件而报404；需要配置nginx解决

在nginx配置文件的server中加上：

        location / {
            try_files $uri $uri/ @router;
            index index.html;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }