简介

  我们开发的vue项目使用history模式的时候, 如果后端不配置, 每次刷新会报404错误, 今天我们来学习下, 使用nginx来配置静态路由, 解决这个问题

代码

server {
  listen 80;
  server_name app.example.com;
  #rewrite ^(.*) https://$server_name$1 permanent; # 配置http自动跳转到https,并携带参数
  # 配置favicon.ico图片地址, 如果没有可以不配
  location = /favicon.ico {
      proxy_redirect     off;
      proxy_pass https://app.example.com/icons/favicon.ico;
      proxy_set_header   Referer   https://app.example.comicons/favicon.ico;
  }

  # 配置后台接口的路由
  location ^~/api/ {
      proxy_pass http://127.0.0.1:3000; // 这里是api的端口, 也可以填别的域名或者地址
  }

  # 配置当不是api开头的请求, 默认全转到静态资源目录, 也就是我们打包完dist目录下的index.html的地址
  location / {
      root /project/app/dist; # 这里需要看你打包的前端项目放在服务器的那个目录下, 有的教程没有这一步
      #index index.html; # 很多教程说需要配置这一步, 自己测试好像不需要
      try_files $uri $uri/ /index.html; # 如果没有配置上边root 那一行,你的项目又是在某个目录下, 请加目录不然找不到 栗子: try_files $uri $uri/ /dist/index.html
  }

}

注意

  1. 每次更改了nginx配置之后记得用nginx -t 检查下语法, 只有success了再执行 nginx -s reload (平滑重启)

  2. 执行完nginx -s reload 之后浏览器请求记得强制刷新, chrome 是 ctrl+F5, 不然有缓存(被坑过)

  3. vuejs官网有提过一嘴后端nginx配置, 传送门, 这种写法

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

感谢您的阅读！如果文章中有任何错误，或者您有更好的理解和建议，欢迎和我联系！