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