• nginx配置


    1.配置普通html

        server {
            listen       1000;
            server_name  www.localhost1000.com;
    
            location / {
                root   /home/middleware/nginx/webPage/partner;
                index  index.html index.htm;
            }
    
            location /partner {
                alias  /home/middleware/nginx/webPage/partner;
                index  index.html index.htm;
            }
    
        }

    2.配置单个vue应用

        server {
            listen       1000;
            server_name  www.localhost1000.com;
    
           root    /home/middleware/nginx/webPage/partner; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
            location / {
                try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                index  index.html index.htm;
            }
            #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
            #因此需要rewrite到index.html中,然后交给路由在处理请求资源
            location @router {
                rewrite ^.*$ /index.html last;
            }
    
        }

    server_name说明。server_name就是域名指向。比如我们这里配置了www.localhost1000.com

    修改本机的【客户端】:C:WindowsSystem32driversetchosts

    10.200.1.87 www.localhost1000.com

    此时,在浏览器访问:http://www.localhost1000.com:1000

    即可匹配nginx对应的server块。实际就是访问http://10.200.1.87:1000。

    3.配置多个vue应用

    多个vue的时候,不是在一个server下配置多个location。而是配置两个同样端口的server

    #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;
        sendfile        on;
        keepalive_timeout  65;
    
        server {
            listen       80;
            server_name  lhw-admin;
    
            charset utf-8;
    
            root    /home/middleware/nginx/webPage/admin; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
            location / {
                try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                index  index.html index.htm;
            }
            #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
            #因此需要rewrite到index.html中,然后交给路由在处理请求资源
            location @router {
                rewrite ^.*$ /index.html last;
            }
    
            #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;
            }
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        server {
            listen       80;
            server_name  lhw-partner;
    
            root    /home/middleware/nginx/webPage/partner; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
            location / {
            #alias /home/middleware/nginx/webPage/partner;
                try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                index  index.html index.htm;
            }
            #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
            #因此需要rewrite到index.html中,然后交给路由在处理请求资源
            location @router {
                rewrite ^.*$ /index.html last;
            }
    
        }    
    
    }
  • 相关阅读:
    Linux 下安装nodejs
    Linux 下安装JDK
    ubuntu 把软件源修改为国内源
    vi/vim 命令使用详解
    不同浏览器css引入外部字体的方式
    npx 命令介绍
    ICloud没有密码怎么注销?
    装修后才知道的79件事
    天翼宽带政企网关B2-1P 如何获得超级管理员账号?
    家庭治疗偏头痛
  • 原文地址:https://www.cnblogs.com/linhongwenBlog/p/14859000.html
Copyright © 2020-2023  润新知