vue部署后刷新404,以及调用后台接口404的问题

 

 

nginx部署vue

使用iis部署vue时遇到调用后台接口404的问题

vue在打包时,里面的vue.config.js里的代理不会被打包,

这里使用nginx部署

 

nginx部署vue
使用iis部署vue时遇到调用后台接口404的问题
vue在打包时,里面的vue.config.js里的代理不会被打包,
这里使用nginx部署
server {
   listen 9999;  
   server_name localhost;  
   #charset koi8-r;
   #access_log logs/host.access.log main;
location / {
        root   打包后文件的地址;          
# 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;

index  index.html index.htm;
    }

# 由于路由的资源不一定是真实的路径，无法找到具体文件
# 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
location @router {
  rewrite ^.*$ /index.html last;
}

# 关键步骤，这里表示将所有的 /api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
# 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
location /api/ {
      # 后端的真实接口
      proxy_pass 改成你自己的地址;
      proxy_redirect off;
      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   Cookie $http_cookie;
      # for Ajax
      #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
      proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
      proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
      proxy_set_header x-requested-with $http_x_requested_with;
      client_max_body_size 1024M;
      client_body_buffer_size 128k;
      proxy_connect_timeout 90;
      proxy_send_timeout 90;
      proxy_read_timeout 90;
      proxy_buffer_size 128k;
      proxy_buffers 32 32k;
      proxy_busy_buffers_size 128k;
      proxy_temp_file_write_size 128k;
    }


}