解決vue打包history模式刷新頁面404報錯 nginx

我的代碼是放在網站根目錄下，如果你的不是，則要修改對應的路徑。

前端配置：主要是vue.config.js和router.js
①、vue.config.js
(如果你的路徑不是網站根目錄)：則要添加publicPath: '/路徑'，如果是則不用修改
②、router.js
(如果你的路徑不是網站根目錄)：則base：'/路徑'，如果是則如下圖所示

nginx配置（參考abp-我直接拿過來了,也可參考jeecgboot）
加兩個文件default.conf和ngnix.conf
default.conf如下

  server {
      listen       80;
      server_name  localhost;
   
      #charset koi8-r;
      #access_log  /var/log/nginx/host.access.log  main;
   
      #location / {
      #    root   /usr/share/nginx/html;
      #    index  index.html index.htm;
      #}
   
      location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            # 此處主要增加該配置，解決界面刷新報 404 的問題
            # 參考博客： https://blog.csdn.net/qq_27985607/article/details/86608392
            try_files $uri $uri/ /index.html =404;
      }

      location /connect/ {
            proxy_pass http://127.0.0.1:44385/;
      }

      location ~ /api/files/static/ {
            # 當path參數存在子路徑時 不能讓nginx解碼 / 符號
            proxy_pass http://127.0.0.1:30000;
      }

      location /api/ {
            proxy_pass http://127.0.0.1:30000/;
      }

      location /signalr-hubs/ {
            proxy_pass http://127.0.0.1:30000/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
      }

   
      #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   /usr/share/nginx/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;
      #}
  }

ngnix.conf如下

  user  root;
  worker_processes  1;
   
  error_log  /var/log/nginx/error.log warn;
  pid        /var/run/nginx.pid;
   
   
  events {
      worker_connections  1024;
  }
   
   
  http {
      include       /etc/nginx/mime.types;
      server_names_hash_bucket_size 512;
      default_type  application/octet-stream;
      #abp租戶頭需要攜帶下划線
      underscores_in_headers on; 
      log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';
   
      access_log  /var/log/nginx/access.log  main;
   
      sendfile on;
      tcp_nopush on; # 激活 TCP_CORK socket 選擇
      tcp_nodelay on; #數據在傳輸的過程中不進緩存

      client_max_body_size 200M; # 上傳文件需要調整請求體大小
      client_body_buffer_size 128k; 

      keepalive_timeout  65;
   
      #gzip  on;
   
      include /etc/nginx/conf.d/*.conf;
  }