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