解决vue打包history模式刷新页面404报错 nginx

本文主要是介绍解决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;
  }

这篇关于解决vue打包history模式刷新页面404报错 nginx的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！