一、VUE项目改动

vue设置为history模式，不用hash模式是因为#（井号）问题

1.vue.config.js中publicPath，'/a/'
2.index.js 中base，‘/a/’
3.index.html中<meta base=/a/>

二、项目部署目录

#跟路径
/data/www/html
#项目路径
/data/www/html/a
/data/www/html/b

三、nginx配置

server {
    listen       80;
    server_name www.xxx.com;  #项目域名
    root /data/www/html;
    
    location /a {
        alias /data/www/html/a/;  #vue项目打包后的dist
        try_files $uri $uri/ /a/index.html; #解决页面刷新404问题                    
        index index.html;
    }
     location /prod-api/ {
          proxy_pass http://127.0.0.1:8080/;
          proxy_http_version                 1.1;
          proxy_cache_bypass                 $http_upgrade;

         # Proxy headers
          proxy_set_header Upgrade           $http_upgrade;
          proxy_set_header Host              $host;
          proxy_set_header X-Real-IP         $remote_addr;
          proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Forwarded-Host  $host;
          proxy_set_header X-Forwarded-Port  $server_port;

          # Proxy timeouts
          proxy_connect_timeout              60s;
          proxy_send_timeout                 60s;
          proxy_read_timeout                 60s;
         proxy_buffer_size 64k;
         proxy_buffers   4 32k;
         proxy_busy_buffers_size 64k;
         proxy_temp_file_write_size 64k;
    }
 
    location /b {
        alias /data/www/html/b/; 
        try_files $uri $uri/ /b/index.html; #解决页面刷新404问题
        index index.html;
    }

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

 ./nginx -t 检查配置文件
 ./nginx -s reload

四、其他

1、注意

• 在一个location中，alias可以存在多个，但是root只能有一个
• alias只能存在与location中，但是root可以用在server、http和location中
• alias后面必须要“/”结束，否则会找不到文件，而root的“/”可有可无

2、nginx日志access.log、error.log

检查项目目录是否有读写权限，是否用户组是nginx。否则会出现无限循环指向index.html过程，报404错误。