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

互联网 2021/4/8 7:11:13

我的代码是放在网站根目录下,如果你的不是,则要修改对应的路径。 前端配置:主要是vue.config.js和router.js ①、vue.config.js (如果你的路径不是网站根目录):则要添加publicPath: /路径,如果是则不用修改②、router.js (如果你的路径不是网站根目录):则base:/路径…

我的代码是放在网站根目录下,如果你的不是,则要修改对应的路径。

前端配置:主要是vue.config.js和router.js
①、vue.config.js
(如果你的路径不是网站根目录):则要添加publicPath: '/路径',如果是则不用修改
②、router.js
(如果你的路径不是网站根目录):则base:'/路径',如果是则如下图所示(我看别人这样写的我也不知道为啥)

nginx配置(参考abp-我直接拿过来了,也可参考jeecgboot)
加两个文件default.confngnix.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;
  }
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[解决vue打包history模式刷新页面404报错 nginx]http://www.zyiz.net/tech/detail-153613.html

上一篇:Node.js安装及环境配置之Windows篇

下一篇:如何在vue项目里面展示 pdf文件

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程