Linux服务器项目部署三（Vue项目打包运行）

1.打包Vue项目

首先在Vue项目中的vue.config.js中加入服务器地址配置。

devServer:{
    host : '192.168.1.1',//此处为你的服务器地址
    port : 8080
  },

 然后在项目命令行输入打包命令。

npm run build

会得到一个dist目录，将dist目录上传到服务器找得到的地方放好（待会要用）。

2. 安装Nginx

2.1安装Nginx所需的配置环境。

//安装gcc
yum install gcc-c++
 
//安装PCRE pcre-devel
yum install -y pcre pcre-devel
 
//安装zlib
yum install -y zlib zlib-devel
 
//安装Open SSL
yum install -y openssl openssl-devel

2.2下载Nginx

进入本地目录，并创建nginx目录，进入该目录后下载Nginx并解压。

cd /usr/local

mkdir nginx

cd nginx

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

tar -xvf nginx-1.23.0.tar.gz

2.3安装Nginx

进入刚刚解压的目录，然后安装Nginx

cd /usr/local/nginx/nginx-1.23.0

./configure

//执行make命令(要是执行失败请检查最开始安装的四个环境有没有安装成功)
make
 
//执行make install命令
make install

2.4配置Nginx

代开Nginx的配置文件，

vi /usr/local/nginx/conf/nginx.conf

按i进入编辑，更改server配置:

listen:端口，server_name：服务器公网地址，root后面为刚刚上传的dist的路径，最后的try_files $uri $uri/ /index.html; 防止刷新出现404。

server {
        listen       8080;
        server_name  192.168.1.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/project/studentcourse/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; 
        }

更改完毕后按Esc退出编辑模式，在底行输入：wq！退出。

2.5 启动Nginx

先启动防火墙

//开启服务
systemctl start firewalld.service 
//设置开机启动
systemctl enable firewalld.service 

然后放行所需端口，并重新启动防火墙。

firewall-cmd --add-port=8080/tcp --permanent
firewall-cmd --reload

 查看已放行的端口。

firewall-cmd --list-all

此步无需操作（移除已放行的端口。）

firewall-cmd --zone=public --remove-port=8080/tcp --permanent 

2.6启动Nginx

/usr/local/nginx/sbin/nginx

查看是否启动成功

ps -ef | grep nginx

成功如图所示

服务器地址：8080 即可访问vue页面 ，到此结束。

（以下为补充内容）

#重启nginx
/usr/local/nginx/sbin/nginx -s reload
#停止运行nginx
/usr/local/nginx/sbin/nginx -s stop
#退出nginx
/usr/local/nginx/sbin/nginx -s quit
#nginx开机自启动
vim /etc/rc.local
#文本底部追加
/usr/local/nginx/sbin/nginx