基于nginx将vue打包项目发布到云服务

流程分析：

1. 将vue项目打包生成dist文件
2. 将dist上传到服务器中
3. 上传方式：1:宝塔面板，2:ftp文件上传
4. 配置服务器文件

---

问题描述

vue打之后本地可以正常访问，但上传到服务器中页面空白，且控制台报错:Failed to load resource: the server responded with a status of 403或者451(Forbidden) ;常见情况为：1：网站域名解析到了服务器，但服务器未绑定此域名，2：服务器没有权限访问你上传的文件地址，需将上传文件目录授予访问权限

问题解决

nginx配置文件如下：

listen 80; //监听端口
    server_name 服务器ip/访问域名;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/PHP/dist; //访问路径，若访问页面空白，需要将当前目录设置为可访问权限
    # 根请求会指向的页面
    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ @router;
      # 请求指向的首页
      index index.html;
    }

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

若访问界面空白，则修改目录权限名

chmod -R 777 /www/wwwroot/PHP

正常情况下在谷歌游览器下网页已经可以访问，但其他游览器若不能正常访问的话则将nginx配置文件中将user修改为root权限

user  root;