前端项目部署到服务器

打包项目

npm run build会生成一个dist文件夹

Xshell软件内新建

名字随便起——>添加服务器地址——>用户名，密码——>记住密码

上传

进入/opt/project文件夹下(文件上传位置)项目的新建文件夹——>/opt/project/新建的文件夹名/dist

将disk文件夹拖到/opt/project/hw文件夹下，可以直接右击dist上传

修改

通过命令修改

cd /usr/local/nginx

cd conf     进入conf文件夹下

vi nginx.conf 编辑nginx.conf文件

或者通过sftp文件可视化操作修改

去文件夹里面找到nginx.conf这个文件在里面改（端口号，文件名，跨域）

server {
                listen 5179;//前端的端口号
                server_name xx.xx.xx.xx;//该服务器ip
                charset utf-8;
                                location / {
                                    root /opt/project/新建文件夹/dist;//存放的dist文件路径
                                        try_files $uri $uri/ /index.html;
                                        index  index.html index.htm;
                                         }
        location ^~/api/ {
           proxy_pass http://后端地址/;//后端请求路径,解决跨域
        }
}

esc回到命令界面退出编辑

:q! 不保存

:wq 保存退出

重启

进入sbin文件夹下执行./nginx -s reload命令重启

cd /usr/local/nginx/sbin

./nginx -s reload

重启报错执行

./nginx -c /usr/local/nginx/conf/nginx.conf

每次更改代码重新部署需要先删除dist，再把本地的dist上传即可