CentOS7安装Nginx并部署Vue项目

如果有疑问或不懂的地方，可以私信我，看到会第一时间回复，一起进步！

前置条件

1. 将nginx的tar.gz包上传到你的centOS的目录中（记住）。

Linux的命令图片。

解压Nginx

环境配置

nginx安装

先解压到指定文件夹，再进入nginx-1.18.0目录，使用configure命令创建——makefile文件。
执行如下命令。

./configure \
--prefix=/usr/local/nginx \
--pid-path=/var/run/nginx/nginx.pid \
--lock-path=/var/lock/nginx.lock \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--with-http_gzip_static_module \
--http-client-body-temp-path=/var/temp/nginx/client \
--http-proxy-temp-path=/var/temp/nginx/proxy \
--http-fastcgi-temp-path=/var/temp/nginx/fastcgi \
--http-uwsgi-temp-path=/var/temp/nginx/uwsgi \
--http-scgi-temp-path=/var/temp/nginx/scgi

编译

输入：make

安装

输入：make install

Nginx启动与访问

地址栏输入虚拟机的IP即可访问（默认为80端口），云服务器输入公网IP即可访问（默认为80端口）。

如果无法访问，可以关闭防火墙。

systemctl stop firewalld

关闭nginx：

./nginx -s stop

或者

./nginx -s quit

重启nginx:
1、先关闭后启动。
2、刷新配置文件。

./nginx -s reload

Vue项目打包

在vue项目中，将config目录下的index.js的localhost改为你的虚拟机地址或者云服务器的公网地址（或者使用localhost也是可以的）
在cmd命令窗口，执行

npm run build

执行命令，会生成dist文件。
将dist文件上传到你的虚拟机或者云服务器的Centos系统下的目录（可以是你新建的目录，需要记住这个路径）。

Nginx的动静分离及使用

cd /usr/local/nginx/conf
vim nginx.conf

保存成功后！

再输入网址，就可以访问到Vue项目的index.html了。