前端项目部署

# 把setting.js中的后端路径改成咱们的公网地址
export default {
base_url:'http://8.130.168.192:8000/api/v1/'
}

npm run build # 把vue项目编译成纯静态，用nginx去代理，访问80端口返回该纯静态页面

# 将生成的静态文件dist压缩成zip格式的,直接拖到终端是不行的，需要下载lrzsz

# 在服务器上安装
yum install -y lrzsz # 装了这个之后就可以将zip文件直接拖到服务器的文件夹内
按住文件，拖到服务器即可
# 使用其他ftp软件上传

# 解压zip
yum install unzip -y # 装了这个才能解压zip文件
unzip dist.zip # 解压

mkdir /home/html # 在home下创建一个html文件夹
mv ~/dist /home/html # 将该dist文件夹移动到html文件夹下

 

# 配置nginx,完成代理
cd /usr/local/nginx/conf # 配置nginx，代理静态文件

mv nginx.conf nginx.conf.bak # nginx.conf nginx 的配置文件

vi nginx.conf # 写入下面

events {
worker_connections 1024; # 最大连接数1024
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
server { # 以后写一个server就可以监听一个端口
listen 80; # 监听80端口
server_name 127.0.0.1;
charset utf-8;
# location的意思是访问根路径就去服务器的这个路径/home/html/dist去拿index.html页面返回到前端
location / {
root /home/html/dist; # html访问路径
index index.html; # html文件名称
try_files $uri $uri/ /index.html; # 解决单页面应用刷新404问题
}
}
}

# 重启nginx即可
nginx -s stop
niginx

# 访问http://8.130.176.65/就能看到前端