前端实现页面路由功能时上线部署全指南

apache作为web服务器：

1.在apache服务器http.conf文件中解锁3个模块：

LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

2.打开重定向功能和代理功能：

# 打开重定向功能
RewriteEngine on

# 打开代理功能
ProxyRequests off
ProxyPreserveHost on

3.新建一个.conf文件并在其中写配置后在http.conf文件引入

# web 页面路由及静态文件配置
Include conf/project-name.conf

4.你的项目名.conf文件中的一些注意点和示例

# ProxyPass和ProxyPassReverse只是url路径匹配，如果匹配到代理项会将匹配剩下后面的路径添加到后面的服务器地址后面，如路径配置是/项目名/一级菜单名/，服务器地址为http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/，浏览器请求的是/项目名/一级菜单名/js/util.js，则匹配到“/项目名/一级菜单名/” 剩下的“js/util.js”会被添加到服务器地址后面即真实请求地址为http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/js/util.js，只是单纯的字符串拼接，所以要注意地址后面的/符号
# 因为url路径匹配时的顺序是按照配置文件的配置顺序从上到下匹配的，根据配置的是一级路径页面，一级路径页面静态文件，二级路径页面，二级路径页面配置文件等不同而调整路径，所以不仅要调整路径，还要注意不同种类配置写在配置文件中的前后顺序。
# 页面路由顺序，子页面要在父页面前面
# 静态文件路径，每个页面对应的静态文件路径，父页面的静态文件路径要放在子页面的静态文件路径后面，即页面路由地址越短放在越后面
# 用我这种配置的好处是不仅可以实现页面路由，还可以让前端开发环境和生产环境中html文件引入的css文件和js文件等统一，如'./js/util.js'，如果当前路由地址是/项目名/一级菜单名/，则浏览器请求的是/项目名/一级菜单名/js/util.js，匹配剩下js/util.js，实际通过代理后请求的地址是/项目存放路径1/项目存放路径2/js.util.js

# 重定向
RewriteRule ^/项目名$ http://apache服务器主机名:apache服务器端口/项目名/home
RewriteRule ^/项目名/$ http://apache服务器主机名:apache服务器端口/项目名/home

# 页面路由及对应静态文件

# 页面路由地址配置
ProxyPass /项目名/一级菜单名/二级菜单名 http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/index.html
ProxyPassReverse /项目名/一级菜单名/二级菜单名 http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/index.html

# 静态文件路径配置（这个静态文件路径是为上面的路由地址配置的）
ProxyPass /项目名/一级菜单名/ http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/
ProxyPassReverse /项目名/一级菜单名/ http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/

# 页面路由地址配置
ProxyPass /项目名/一级菜单名home http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/index.html
ProxyPassReverse /项目名/一级菜单名home http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/index.html

# 静态文件路径配置（这个静态文件路径是为上面的路由地址配置的）
ProxyPass /项目名/ http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/
ProxyPassReverse /项目名/ http://apache服务器主机名:apache服务器端口/项目存放路径1/项目存放路径2/

niginx作为web服务器：

待补充

express作为web服务器：

待补充

 

参考文档：

https://www.cnblogs.com/guanghe/p/10341988.html