Linux入门（七） ~ Nginx部署Vue项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Linux入门（七） ~ Nginx部署Vue项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1347字，纯文字阅读大概需要2分钟。

内容图文

文章目录

• 前言
• 安装Nginx
• Vue项目部署

---

前言

---

安装Nginx

1、下载Nginx
http://nginx.org/en/download.html

2、上传
可以使用XShell+XFtp工具上传到/usr/local目录
或直接下载

wget -c https://nginx.org/download/nginx-1.12.0.tar.gz

3、解压

tar -zxvf nginx-1.12.2.tar.gz

4、安装相关的依赖工具

yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

5、配置

./configure

6、编译和安装
如果/usr/local下出现nginx目录，表示安装成功

make && make install

7、使用
启动

cd /usr/local/nginx/sbin/
./nginx 

其他命令

./nginx -s stop		停止
./nginx -s quit		退出
./nginx -s reload  重启

---

8、打开80端口

firewall-cmd --zone=public --add-port=80/tcp --permanent （--permanent永久生效，没有此参数重启后失效）

重新载入

firewall-cmd --reload

或者关防火墙

systemctl stop firewalld

启动成功，打开浏览器输入：http://localhost，如果浏览器出现 Welcome to nginx! 则表示 Nginx 运行成功。

Vue项目部署

1、打包Vue项目
在前端项目的目录下，输入打包命令：

npm run build

项目出现dist目录

2、上传
将dist目录达成压缩包，上传到/usr/local下

3、解压
创建一个目录，将压缩包移动进去，再解压

mkdir oa_web
mv dist.zip oa_web
unzip oa_web/dist.zip

4、配置nginx
修改nginx.conf配置文件

vi nginx/conf/nginx.conf

修改配置，使nginx的根目录指向项目目录

5、重启nginx

cd /usr/local/nginx/sbin
./nginx -s reload

重新访问http://localhost，页面就改为了前端项目的首页。

内容总结

以上是互联网集市为您收集整理的Linux入门（七） ~ Nginx部署Vue项目全部内容，希望文章能够帮你解决Linux入门（七） ~ Nginx部署Vue项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---