使用nginx部署多个vue项目,亲测有效(使用域名https方式访问)

1.修改nginx.conf配置

    server {
        listen   443 ssl;
server_name  你的域名;
#ssl on; # 开启ssl证书访问
ssl_certificate  ./1_bundle.crt;  #你的证书crt文件地址
ssl_certificate_key  ./2_.key;  #你的证书key文件地址
ssl_session_timeout  60m; # session有效时间10分钟
#ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_protocols SSLv2 SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; # 按照这个套件配置
#ssl_prefer_server_ciphers on;        
        #charset koi8-r;

        #access_log  logs/host.access.log  main
        #项目一的配置                                                                                                             
        location / {
           proxy_pass http://你的网址:80;
           proxy_set_header Host $proxy_host;	#获取正确的IP和端口号
           proxy_set_header X-Real-IP $remote_addr;	#获取正确请求的远程IP
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	#获取正确的ip
            #proxy_set_header X-Forwarded-Proto $scheme;		#获取正确的请求协议
            #proxy_set_header X-Forwarded-Port $server_port; #获取正确的访问端口号
     index  index.html index.htm;
     root html;
     try_files $uri $uri/ /index.html;  //映射到index.html上
      client_max_body_size 100M;
        }
         #项目二的配置  
     location ^~ /manager/{
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
}
        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

2.第二个vue项目打包时需要修改两处(其中"/manager/"可根据自己的需要修改)

2.1 修改config/index.js文件中的build{}里的assetsPublicPath:"/manager/"；
2.2 修改router/index.js添加 base: ‘/manager/’ ；

3.在nginx的html文件夹下创建manger文件夹,如下图

4.将第二个项目打包的dist文件夹中的内容拷到manager文件夹下,如下图:

5.重启nginx,即可通过https://域名/manager/访问第二个网站了.