# 一、打包vben-admin项目
根据官网的教程，用`pnpm preview`来打包，值得注意的是，vben admin官网上还没更新，用的是`yarn`管理包，但是在2.8的版本已经建议使用`pnpm`了，当然，也可以使用`pnpm build`来打包，这里不局限，打包好就好了，官网在这里[构建&部署](http://doc.vvbin.cn/guide/deploy.html)

 # 先打包在进行预览 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; }

原文链接：https://blog.csdn.net/qq_63187879/article/details/130746305