Nginx 一个域名对应多个vue.js工程的nginx配置

我不是女神ヾ 2022-05-23 10:56 237阅读 0赞

\#Nginx 一个域名对应多个vue.js工程的nginx配置

> nginx，虽然可以给每个前端工程在nginx部署中配置一个单独的域名，这样会比较浪费域名，比如一个项目，会有pc端，手机端，还有管理员后台，都是不同的vue项目，应该将它们配置在同一个域名下才比较合理.

需求  
http:192.168.88.88/crm  
http:192.168.88.88/monitor  
类似这种多个前端vue工程，对应同一个域名

*  vue工程

module.exports = { 
      build: { 
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../crm/index.html'),
        assetsRoot: path.resolve(__dirname, '../crm'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/crm/',
        productionSourceMap: true,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
      },

module.exports = { 
      build: { 
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../monitor/index.html'),
        assetsRoot: path.resolve(__dirname, '../monitor'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/monitor/',
        productionSourceMap: true,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
      },

前端打包后放到nginx配置的root目录下(nginx roo目录我设置的web)

*  Nginx 配置如下：

#user  nobody;
    worker_processes  8;
    
    events { 
        worker_connections  1024;
    }
    
    
    http { 
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
        keepalive_timeout  65;
    
    	upstream word { 
    		server  127.0.0.1:9090;
    		keepalive 2000;
    	}
        server { 
            listen       80;
            server_name  10.101.141.117;
    		root  web;
    		#启用支持websocket连接
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    		proxy_read_timeout   3600s; # 超时设置
        
            location /borgward_word/ { 
                proxy_pass http://word;
            }
            location /crm{ 
    			try_files $uri $uri/ /crm/index.html;        
    		}
    		location /monitor { 
    			try_files $uri $uri/ /monitor/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;
            }
        }
    }

启动nginx后，在浏览器中输入上面需求中的地址即可访问了 各个项目了。