前端部署项目到服务器（宝塔面板·腾讯云专享版），vue项目为例

第一步 开启代理

打开vue.config.js文件，开发环境下，该代理是生效的，但在项目部署服务器上面时候，这个代理会失效，但是，我们要的并不是这个代理起作用，而要的是将请求路径用/api代替了这个功能，这样我们在开发环境下和上线时都不需要对项目的请求路径有大的改变，让我们更方便的进行开发和上线，这样我们的每一个请求的路径格式都是：/api/接口

第二步，拿到项目dist文件夹，

打开项目文件package.json下，运行build脚本，打包项目

打包完成后会在项目下发现多出一个文件夹dist，这个就是我们要部署上去的项目

第三步，进入宝塔，部署网页

在首页打开网站选项

选择PHP项目，点击“添加站点”

按照要求填写本服务器域名，我这里填了IP地址，然后点确定。这里印象中是没有坑的

添加站点成功后，会看到下面的页面，接着点击箭头指向的地方

打开后，这里是部署项目文件的地方，上传第二步得到的项目文件夹dist，切记，要进入到dist目录下，即打开dist文件夹，将里面的文件全部复制到部署项目文件的地方

第四步：修改配置文件

第三步部署文件上去后，你会发现不能请求接口数据，这是因为我们还没有开启网页的请求接口代理，现在就开始进行配置

打开下面箭头指向的地方

进入设置后，打开配置文件选项，添加代理

在配置文件添加下面代码

location /api {
    // rewrite ^/api/(.*)$ /$1 break; ，这里一定要有，这是当请求地址替换掉/api时，
    //将/api置空，不然你会发现请求路径会多了一个/api导致请求不成功
    rewrite ^/api/(.*)$ /$1 break; 
    proxy_pass http://127.0.0.1:端口;
    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_buffering off;
    proxy_set_header Connection "";
}

然后保存，刷新一下，这样你就能打开你的项目网址使用网页啦

如果项目更新，只需要再次将dist文件夹里面的文件复制上去就行了。

以上就是我部署前端项目到服务器的步骤啦，如果其中有不对或者遗漏的细节，欢迎在评论区交流，如果文章有用，就点个赞吧。