一、打包vben-admin项目

根据官网的教程，用pnpm preview来打包，值得注意的是，vben admin官网上还没更新，用的是yarn管理包，但是在2.8的版本已经建议使用pnpm了，当然，也可以使用pnpm build来打包，这里不局限，打包好就好了，官网在这里构建&部署

    # 先打包在进行预览
    yarn preview
    # 直接预览本地 dist 文件目录
    yarn preview:dist

打包好以后呢，根目录会有dist的一个目录，这时候打包好的静态文件就在文件夹里了，我们部署的话，是只需要把这个文件夹中的文件上传到服务器就ok

二、上传部署

上传到服务器后我们就要来配置一下网站了，这边我们线上的环境是LNMP的，用的是nginx

现在来创建一个站点

如你所见，域名就直接解析好以后拿来用就好了，如果没有域名的话，用ip地址+端口也是可以的，但是不建议这样做，根目录的话就是我们刚刚上传文件的地址，默认的话会访问index.html，所以我们直接把他配置在dist目录

创建好以后来配置一下nginx，我们可以监听指定的端口，来让他完成代理，从而实现我们访问这个项目，配置如下：

    
  server {
      listen       80;
      server_name  localhost;
      location /sub/ {
        # 这里是vue打包文件dist内的文件的存放路径
        alias   /srv/www/work/dist;
        index index.html index.htm;
        try_files $uri $uri/ /sub/index.html;
      }
      # nginx配置
      location / {
        # 不缓存html，防止程序更新后缓存继续生效
        if ($request_filename ~* .*\.(?:htm|html)$) {
          add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
          access_log on;
        }
        # 这里是vue打包文件dist内的文件的存放路径
        root   /srv/www/project/;
        index  index.html index.htm;
      }
  }

三、405 - Reflect.has called on non-object - 404错误解决

404

这个时候你会发现，我们用刚刚准备好的域名可以访问了！但是一刷新，就会发现出现了404！所以这里我们还需要配置一下路由

    
    # nginx配置
    location / {
      # 用于配合 History 使用
      try_files $uri $uri/ /index.html;
    }

405

当你满心欢喜点击登录按钮的时候，会给你突然出现405的错误，这个是因为nginx默认不允许静态资源来发送post请求，要解决很简单，只需要在上面的配置中加上下面这个配置即可

    # 将405状态码强行转成200
    error_page  405 =200 $request_uri;

Reflect.has called on non-object

这个问题就是因为他vben本身是有迷惑服务器的，你会发现，vben在请求的时候，你看到的url是vben的地址，而不是服务端，所以如果没有配置反向代理，那么服务器会认为你访问了vben的路由，然后给你返回的就是个静态页面而不是资源，虽然他的状态码是200

那我们如何解决这个问题，就是在监听这个路由，然后给他转发到服务器的地址即可，这个依旧是在站点配置中配置即可，现在就可以正常使用您的vben了！

    
    # 接口代理，用于解决跨域问题
    location /api/ {
      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_pass http://111.111.111.11:端口/api/;
      proxy_redirect default;
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    }

完整配置如下：

nginx

    
  server {
      listen       80;
      server_name  localhost;
      location /sub/ {
        # 这里是vue打包文件dist内的文件的存放路径
        alias   /srv/www/work/dist;
        index index.html index.htm;
        try_files $uri $uri/ /sub/index.html;
      }
      # nginx配置
      location / {
        # 不缓存html，防止程序更新后缓存继续生效
        if ($request_filename ~* .*\.(?:htm|html)$) {
          add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
          access_log on;
        }
        # 这里是vue打包文件dist内的文件的存放路径
        root   /srv/www/project/;
        index  index.html index.htm;
      }
  }

站点

    

    # nginx配置
    location / {
      # 将405状态码强行转成200
      error_page  405 =200 $request_uri;
      # 用于配合 History 使用
      try_files $uri $uri/ /index.html;
    }
    
    
    # 接口代理，用于解决跨域问题
    location /api/ {
      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_pass http://111.111.111.11:端口/api/;
      proxy_redirect default;
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    }