一、vue项目的打包

       vue项目在本地调试完成后，即可执行以下命令打包部署，此时会生成一个 dist 包，这个包即是我们要部署的文件。

npm run build

二、nginx 的安装

        nginx 的安装比较简单，直接用 yum  安装即可

yum install nginx

三、nginx 的配置

nginx 的主配置文件默认在 /etc/nginx/nginx.conf 中

vim /etc/nginx/nginx.conf

第一行的user值改为 root

user root;

将里面的server 的值 按下面改动

server {
        listen       5173;  # 前端项目端口
        server_name  _;
        root         /home/nginx/dist; # 存放编译后代码的位置
        
        location / {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'Content-Type';
           
           if ($request_method = 'OPTIONS') {
              add_header 'Content-Length' 0;
              add_header 'Content-Type' 'text/plain; charset=utf-8';
              return 204;
           }
        }
    
    }

四、nginx 的启动

systemctl start nginx

五、常见的问题

403 forbidden (13: Permission denied)报错

原因一：由于启动用户和nginx工作用户不一致所致

1 查看nginx的启动用户

命令：

ps aux | grep "nginx: worker process" | awk  '{print $1}'

[root@localhost hc]# ps aux | grep "nginx: worker process" | awk  '{print $1}'
nginx
root

 发现是nginx，而不是用root启动的

2. 将nginx.conf的user改为和启动用户一致 

将nginx.conf文件中的 user 对应的nginx 改为 root ，改完后重启

[root@localhost hc]# vim /etc/nginx/nginx.conf
[root@localhost hc]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@localhost hc]# nginx -s reload

原因二、权限问题，如果nginx没有web目录的操作权限，也会出现403错误。

解决办法：修改web目录的读写权限，或者是把nginx的启动用户改成目录的所属用户，重启Nginx即可解决

chmod -R 755 / var/www

原因三、SELinux设置为开启状态（enabled）的原因

首先查看本机SELinux的开启状态，如果SELinux status参数为enabled即为开启状态

/usr/sbin/ sestatus -v 

或者使用getenforce命令检查

如何关闭 SELinux 呢

1.临时关闭（不用重启）

setenforce  0

2. 永久关闭（需要重启）

修改配置文件 /etc/ selinux/config，将SELINUX=enforcing改为SELINUX=disabled

 vi /etc/selinux/config
 

   #SELINUX=enforcing

   SELINUX=disabled

重启生效。

reboot