一、介绍
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点(俄文:Рамблер)开发的.
它也是一种轻量级的Web服务器,可以作为独立的服务器部署网站(类似Tomcat)。它高性能和低消耗内存的结构受到很多大公司青睐,如淘宝网站架设。
二、安装步骤
1、下载
下载地址:http://nginx.org/en/download.html (Nginx官网)
2、下载到指定的文件夹后解压出来
可以看到以下目录:
3、nginx命令介绍
start nginx
开启nginx服务nginx.exe -s stop
关闭nginx服务,快速停止nginx,可能并不保存相关信息nginx.exe -s quit
关闭nginx服务,完整有序的停止nginx,并保存相关信息nginx.exe -s reload
重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx- 使用
taskkill /F /IM nginx.exe > nul
命令强关nginx服务器
4、开启服务
控制台(CMD)切换到Nginx目录下,输入start nginx
,然后在浏览器页面输入localhost
,出现如下界面则表示安装成功。默认监听80端口号。
5、访问自己的目录
5-1、先打包
npm run build
5-2、把生成的dist
目录,放到nginx里面的html目录
下。
路由为hash模式
浏览器访问:localhost/dist/index.html
就可以看到页面了。
路由为history
当你使用 history 模式时,url就像正常的url,例如
“http://yoursite.com/mapp/”,不过这种模式还需要后台配置支持。因为我们的应用是单页面应用,如果后台没有正确的配置,当用户在浏览器直接访问 "http://yoursite.com/mapp/home"就会返回 404。
1、要在conf文件夹下的nginx.conf文件里,修改配置信息:
location / {
root html/dist/;
try_files $uri $uri/ /dist/index.html;
index index.html;
}
2、修改之后在终端窗口输入命令:
- 先强制关闭:
taskkill /F /IM nginx.exe > nul
- 再开启服务器:
start nginx
3、随后在浏览器访问:localhost
,可以成功访问: