Nginx部署vue项目并解决切换路由就报404问题

蔚落 2022-09-06 00:23 249阅读 0赞

# 1.安装nginx并配置 #

#user nobody;
    worker_processes  1;
    
    #error_log logs/error.log;
    #error_log logs/error.log notice;
    #error_log logs/error.log info;
    
    #pid logs/nginx.pid;
    
    events { 
        worker_connections  1024;
    }
    
    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"';
    
        #access_log logs/access.log main;
    
        sendfile        on;
        #tcp_nopush on;
    
        #keepalive_timeout 0;
        keepalive_timeout  65;
    
        #gzip on;
    
        server { 
            listen       18000;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log logs/host.access.log main;
    
            location / { 
                root   html;
                index  index.html index.htm;
                # 解决切换路由就报404问题
    			try_files $uri $uri/ /index.html;
            }
    	
    
            #error_page 404 /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html { 
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ { 
            # proxy_pass http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ { 
            # root html;
            # fastcgi_pass 127.0.0.1:9000;
            # fastcgi_index index.php;
            # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
            # include fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht { 
            # deny all;
            #}
        }
    
    
        # 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;
        # }
        #}
    
    }

# 2.部署项目 #

把vue项目打包后的`dist`目录解压到nginx的html目录中即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxa2VlcA_size_16_color_FFFFFF_t_70]

# 3.注意事项 #

查看上面配置文件即可知道这行代码该往哪放了。

# 解决切换路由就报404问题
    try_files $uri $uri/ /index.html;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxa2VlcA_size_16_color_FFFFFF_t_70]: /images/20220829/010b8ee29de14cf99a4e1ff92085e239.png