Vue项目部署踩坑——刷新404、上传405和504

Vue项目部署踩坑——刷新404、上传405和504

使用的是宝塔面板部署，第一次用宝塔部署前端也研究了好久。

第一个遇到的问题是如何部署项目，一开始我看到宝塔上有个添加Node项目，我在本地build后将dist文件上传之后部署，结果访问不了，之后去百度搜，说是直接上传项目不用build，我试了试也是没起作用。然后找到了另一种方法要在PHP项目那边添加站点才行，将dist文件上传之后部署，可以正常访问了。

刷新报404

详细可以参考:Vue 项目布署后，刷新页面（或跳转页面）出现 404 解决办法

# nginx配置

# 刷新404
location / {
    try_files $uri $uri/ /index.html;
}

上传报405

因为这里请求的静态文件采用的是post方法，nginx是不允许post访问静态资源。但是文件上传一般都是约定用post上传的。

详细可以参考:【使用nginx部署到服务器后，文件上传提示405】

# nginx配置

    # 上传405 之后报504
    location /add_chart_async {
      proxy_method POST;
      proxy_pass   http://xxx:7071$request_uri;
      proxy_set_header user_token $http_user_token;
    }
    location /add_chart {
      proxy_method POST;
      proxy_pass   http://xxx$request_uri;
      proxy_set_header user_token $http_user_token;
    }
    location /api/file/upload {
      proxy_method POST;
      proxy_pass   http://xxx:8122$request_uri;
      proxy_set_header user_token $http_user_token;
    }

上传失败报506

解决了上传文件报405not allowed 结果上传文件又上传失败504超时。

参考：解决nginx 部署前端post请求405 not allowed

# nginx配置

   # 刷新404
    location / {
      try_files $uri $uri/ /index.html;
       #加上这一行 解决上传报405 同时也上传成功了
      error_page 405 =200  $request_uri;
    }
    
    # 上传405 之后报504
    # location /add_chart_async {
    #   proxy_method POST;
    #   proxy_pass   http://xxx:7071$request_uri;
    #   proxy_set_header user_token $http_user_token;
    # }
    # location /add_chart {
    #   proxy_method POST;
    #   proxy_pass   http://xxx:7071$request_uri;
    #   proxy_set_header user_token $http_user_token;
    # }
    # location /api/file/upload {
    #   proxy_method POST;
    #   proxy_pass   http://xxx:8122$request_uri;
    #   proxy_set_header user_token $http_user_token;
    # }