路由配好了,需要调试下 build 后是否可用,这时我们需要一个服务端来运行静态网页。

官网直接下载一个 windows 版本的 ngnix 即可:

http://nginx.org/en/download.html

 

下载解压后:

大型门户网站架构 门户网站搭建方案_nginx

 

命令行到此路径,启动 ngnix:

大型门户网站架构 门户网站搭建方案_nginx_02

 

默认 80 端口:

大型门户网站架构 门户网站搭建方案_nginx_03

 

常用配置在 conf 文件夹下 nginx.conf 中:

大型门户网站架构 门户网站搭建方案_门户网站_04

 

location 即为入口文件夹及主界面,静态资源可以直接放入 html 文件夹中:

大型门户网站架构 门户网站搭建方案_大型门户网站架构_05

 

此时访问 80 端口即可获取前端界面:

大型门户网站架构 门户网站搭建方案_门户网站_06

 

但是切换到其他路由界面,就会出现访问不到的情况

大型门户网站架构 门户网站搭建方案_门户网站_07

 

这是因为单页面应用路由被服务器解析成了获取文件地址,所以会报 404 找不到。可以通过配置 解决:

大型门户网站架构 门户网站搭建方案_门户网站_08

 

再重启下 ngnix 

大型门户网站架构 门户网站搭建方案_nginx_09

 

稍等一下,再刷新界面即可

大型门户网站架构 门户网站搭建方案_nginx_10

 

本机访问无误后,可以将端口暴露给局域网访问:

1、打开控制面板,找到防火墙,选择高级设置

大型门户网站架构 门户网站搭建方案_html_11

2、入栈规则中,新建规则

大型门户网站架构 门户网站搭建方案_html_12

3、选择端口,下一步

大型门户网站架构 门户网站搭建方案_nginx_13

4、特定端口,80,下一步

大型门户网站架构 门户网站搭建方案_门户网站_14

5、一直下一步

6、最后添加名称,点击完成

大型门户网站架构 门户网站搭建方案_nginx_15

7、可以看到已经添加好了

大型门户网站架构 门户网站搭建方案_html_16

其他ip 访问一下,没有问题:

大型门户网站架构 门户网站搭建方案_门户网站_17