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

#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后，在浏览器中输入上面需求中的地址即可访问了 各个项目了。