【vue前端项目部署到linux服务器的nginx上】

1.准备linux

准备一台linux服务器，可以虚拟机安装，也可以购买云服务器，我使用的是虚拟机安装的centos

2.安装nginx

如果已经安装了，可以忽略这一步

# 我这里采用yum方式安装，需要虚拟机能访问网络
yum install -y nginx

# 检查版本，没有则重新安装
nginx -v

3.启动nginx并检查是否正常

# 启动
nginx  # 任意目录都可以执行，正常安装的话，nginx会加入到PATH环境变量，不担心找不到命令

# 查看nginx进程
ps -ef | grep nginx

# 浏览器访问,查看是否正常启动 直接访问 http://linux服务器的ip   因为nginx默认监听80端口，浏览器默认也是80端口

######################
# 这里是 nginx 停止命令，需要请自取
nginx -s stop
######################

这个页面看着有点怪，像是centos的，先不管，能访问就ok

ps：如果不能访问，有可能是防火墙问题，检查防火墙

# 检查防火墙是否开启
systemctl status firewalld

如下：

如果包含active 、running之类的关键字说明开启了防火墙 关掉就行

# 关闭防火墙，有永久关闭防火墙的方法，有需求请自行搜索
systemctl stop firewalld

4.部署项目

vue项目打包之后，项目目录下会生成一个dist文件夹（vue创建前端项目）

4.1linux服务器上创建目录和配置

# 我把这个项目相关内容都放在/home/proj/vue/vue-test/目录
mkdir -p /home/proj/vue/vue-test/

# 创建目录
cd /home/proj/vue/vue-test/
mkdir -p ./www/html # 存放dist文件
mkdir -p ./www/conf # 存放nginx.conf
ls
# 把dist目录上传到html下
# 复制nginx配置文件到conf目录
cp /etc/nginx/nginx.conf /home/proj/vue/vue-test/www/conf 

4.2修改nginx.conf文件内容

vim /home/proj/vue/vue-test/www/conf/nginx.conf

只要修改以上两行，

server_name：该属性用于定义服务器的访问ip，默认是localhost就代表仅可本地访问，如果服务器有自己对应的外网ip，修改为自己的外网ip即可。我这里是虚拟机的ip地址

root：该属性表示自己的网站根目录，指向自己刚刚的dist目录

4.3配置完成后重启nginx

nginx -c /home/proj/vue/vue-test/www/conf/nginx.conf

浏览器输入linux服务器的ip地址 进行访问，结果如下