如何使用Nginx来部署我们打包好的前端Vue项目
Nginx 环境搭建
因为这里做的演示是本地服务，就需要安装在自己的电脑上
Mac系统下的nginx的安装及使用
1.确认你的电脑是否安装homebrew，打开电脑终端输入：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.确认homebrew是否安装成功，输入
brew -v
fc993ba524c911a73bc60128cb4a146.png
3.安装nginx
brew install nginx
4.确认nginx是否安装成功
nginx -v
d5d3cdc4364e45c63e32094d349a048.png
5.熟悉 nginx目录：
- nginx 安装目录
/usr/local/Celler/nginx/1.21.1
- nginx配置文件目录
/usr/local/etc/nginx
- config文件目录
/usr/local/ect/nginx/nginx/nginx.conf
6.进入bin目录
cd /usr/local/Celler/nginx/1.21.1/bin
输入，启动
sudo ngnix
验证是否启动成功
http://localhost
如果出现下图，证明nginx已经启动成功
捕获.PNG
如果在启动过程中出现
nginx: [emerg] bind() to 0.0.0.0:80 failed (48: Address already in use)
该问题是由于8080端口被占用，解决
- 查看占用8080端口应用：
ps -ef | grep nginx
- 杀死进程
kill -9 xxx
- 停止、然后重启
sudo nginx -s stop
sudo nginx
7. 前端项目打包
首先需要先在打包之前在 Vue 的配置文件里去修改公共路径的配置
3bc2df45bbdd52e88018adf4931aa89.jpg
同时在项目的 router 目录下 index.js 为 Vue 项目指定路由基本路径为 /
a0fb1721f2f6668836c46731b8eea7b.jpg
8.打包前端项目,打包成 dist 目录
npm run build:prod
9.Nginx 部署项目
将打包好的前端项目放到 Nginx 的 html 目录下去
b8183b5f567ecc2a7c041831b66334b.png
然后将 dist文件 拖到 html 中就可以了
修改 Nginx 配置文件
修改一下 Nginx 的配置文件 nginx.conf
配置改动：
(1）端口号为 8088
(2) 服务名称为 localhost
(3)root目录为 html/dist
(4)location地址为 /
处理前台路由 history 模式刷新 404 的问题
a6338dbbc2556fa015eab3bf816236e.png
8.启动 Nginx 访问项目
配置修改好之后，我们就可以使用 Nginx 的命令来启动 Nginx 服务
cd /usr/local/Cellar/nginx/1.12.1/bin/
nginx -s reload
如果没有任何提示，就说明 Nginx 服务重新加载配置成功了
浏览器地址栏里访问 http://localhost:8088了
windows下nginx的安装及使用
1.安装nginx(window) http://nginx.org/en/download.html
解压即可
703c73fe5db9f1cf74c217c09ff4288.png
2.准备打包好的vue项目(dist) 这里dist文件目录在D:\nginx-1.21.1\html\dist
3.在nginx安装目录中找到D:\nginx-1.21.1\conf）进行修改
vue history模式下nginx
1.png
补充
常用的指令有：
nginx -t 试配置是否有语法错误
nginx -s reload 重新加载配置
nginx -s reopen 重启
nginx -s stop 停止
nginx -s quit 退出
nginx -V 查看版本，以及配置文件地址
nginx -v 查看版本
nginx -c filename 指定配置文件
nginx -h 帮助
网友评论