服务器部署vue

1.下载及安装

打开服务器终端，在终端中输入以下命令，下载nginx安装包。

wget http://nginx.org/download/nginx-1.20.2.tar.gz

其中nginx版本可以自己选择，具体版本可查看此链接：nginx news
将下载的压缩包解压，输入指令：

tar -zvxf nginx-1.20.2.tar.gz

cd nginx-1.20.2

安装nginx

./configure --with-http_ssl_module --with-http_gzip_static_module

2. 安装nginx的时我遇到以下问题(如果nginx安装成功可忽略）

1，PCRE 缺失，报错代码

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre= option.

解决办法：安装 PCRE

yum -y install pcre-devel

安装完再次执行 

./configure --with-http_ssl_module --with-http_gzip_static_module

又报了个错，如下，出现此报错信息，意思就是nginx有相关前置依赖openssl-devel没有安装

./configure: error: SSL modules require the OpenSSL library.
You can either do not enable the modules, or install the OpenSSL library
into the system, or build the OpenSSL library statically from the source
with nginx by using --with-openssl= option.

 解决办法：安装下openssl-devel

yum -y install openssl openssl-devel

 安装完再次执行

./configure --with-http_ssl_module --with-http_gzip_static_module

 没出现报错，那么继续

 

 三.继续安装nginx

make

 如下：

make install

 四.启动程序

进入目录，启动nginx

cd /usr/local/nginx/sbin/

./nginx

 如下：

查看版本：

./nginx -v

五、配置nginx
在将dist文件传输至服务器以后，需要对nginx进行配置。
在服务器中找到/usr/local/nginx/conf/nginx.conf文件，打开nginx.conf文件修改以下内容：

1）打开winscp

 将打包好的vue文件dist放入指定目录

2）.修改服务器端口
listen默认端口为8080，因为个人需求所以改为了8081，server_name填写localhost即可。 

3）修改dist存放路径

修改成刚才dist文件存放的路径，添加一行try_files $uri $uri/ @router;，防止刷新页面出现404。 

 五、进入界面和项目更新

1.进入界面

配置完成后需要重新启动以下nginx，可以用如下指令：

nginx -s stop

cd /usr/local/nginx/sbin/

./nginx

 运行，在浏览器中输入服务器IP:端口

2.项目更新

如果后续前端项目文件需要更新，则再次生成dist文件，将新的dist文件替换至服务器文件夹相同位置中，无需重启nginx。
若发现更新后前端界面无变化，可重启nginx后再次进入界面查看。

如输入地址还是打不开网页

可能遇到以下问题：

1.端口被占用

解决办法：换个端口号并保存，打开Winscp软件找到指定目录 /usr/local/nginx/conf/nginx.conf

 再执行

./nginx -s stop

cd /usr/local/nginx/sbin/

./nginx

Tips:关于命令

进入目录，启动nginx

cd /usr/local/nginx/sbin/

./nginx

查看nginx运行状态：

ps aux | grep nginx

• 停止运行：

./nginx -s stop

• 查看版本：

./nginx -v

• 检查配置文件：

./nginx -t

查看8080端口被占用的进程

lsof -i:8080

查看进程号PID 

ps -ef|grep nginx 

 强制停止：

kill -9 进程号