vue前端静态页面部署

1.将前端项目打包

npm run build

2.在服务器上安装nginx

# centos
yum install nginx -y

3.将打包的dist目录中的文件上传到服务器的/usr/share/nginx/operation-web目录中

mkdir -p /usr/share/nginx/operation-web

4.给目录设置权限

# 设置正确的权限
chown -R nginx:nginx /usr/share/nginx/operation-web/
chmod -R 755 /usr/share/nginx/operation-web/

5.修改Nginx配置文件 /etc/nginx/nginx.conf

vim /etc/nginx/nginx.conf

添加如下内容，表示将网页部署在9300端口下

server {listen 9300;server_name localhost;root /usr/share/nginx/operation-web;index index.html;# 访问日志access_log /var/log/nginx/operation-web.access.log;error_log /var/log/nginx/operation-web.error.log;location / {try_files $uri $uri/ /index.html;}# 静态资源缓存location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {expires 1y;add_header Cache-Control "public, immutable";}
}

6.检查 Nginx 配置语法

nginx -t

7.启动nginx服务

systemctl start nginx
systemctl enable nginx

8.查看nginx状态是否正常

systemctl status nginx

如果不正常，常见错误原因可能是端口占用或者进程占用，可以使用如下命令排查

# 检查是否有 Nginx 进程残留
ps aux | grep nginx
# 检查9300端口是否被占用
netstat -tulpn | grep 9300

9.访问网页http://{ECS的公网ip}:9300/