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

版权声明:技术有限,如有错误,请指出谢谢 作者:赵先森 出处:https://blog.csdn.net/weixin_37264997 版权所有,欢迎保留原文链接进行转载:) https://blog.csdn.net/weixin_37264997/article/details/80609874

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

展开阅读全文

没有更多推荐了,返回首页