nginx 部署多个vue项目

这里写目录标题 vue项目配置.env.staging文件.env.production文件vuefig.js文件router->index.js文件 nginx配置

ngxin下载后解压即可
1.vue项目配置（基于若依框架的前端项目）

vue项目配置 .env.staging文件

# 页面标题
VUE_APP_TITLE = xx管理

#用于配置 nginx的子路径
NODE_ENV = production

# 测试环境配置
ENV = 'staging'
#访问的接口
VUE_APP_BASE_API = 'http://ip地址:8089'

.env.production文件

# 生产环境配置
ENV = 'production'

# 生产环境 访问nginx代理接口的路径
VUE_APP_BASE_API = '/prod-api'

vuefig.js文件

router->index.js文件

nginx配置

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
   server {
        listen       80;  #端口号 可以更改成其他
        #listen       443 ssl;   如果是域名需要用 ssl证书
        server_name  localhost;  
        #默认
        location / {    
            index  index.html index.htm;
	     root   D:/xxx/xxx/dist; #vue打包后的地址
	      try_files $uri $uri/ @router;
        }
	
	#当前项目
	  location /dh/ {
		root  html;   #项目打包文件的存放路径  ./nginx/html/dh("和location /##/ 中的值对应")/
            index  index.html index.htm;   
	      try_files $uri $uri/ /dh/index.html;   #刷新时调用的页面路径
        }
		
		#代理的后端接口地址
        location /prod-api {
        	#匹配规则
            rewrite ^.+prod-api/?(.*)$ / break;
            #接口地址 
          	proxy_pass http://127.0.0.1:8089;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }



        location @router {
            rewrite ^.*$ /index.html last;
        }
	  error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          root   html;
    	  }
	}
  }