angular 前端路由不生效解决方案
程序员文章站
2022-04-29 18:42:21
最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下。本地开发正常,但是部署到服务器上就有问题,之前部署到IIS上时需要配置一个 url rewrite ,可能遇到了类似的问题,查阅一番之后确实是这样。 ......
angular 前端路由不生效解决方案
intro
最近使用 angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下。本地开发正常,但是部署到服务器上就有问题,之前部署到iis上时需要配置一个 url rewrite ,可能遇到了类似的问题,查阅一番之后确实是这样。
启用前端路由服务器配置
没有一种配置可以适用于所有服务器。 后面这些部分会描述对常见服务器的配置方式。 这个列表虽然不够详尽,但可以为你提供一个良好的起点。
-
apache:在
.htaccess
文件中添加一个, 代码如下():
rewriteengine on # if an existing asset or directory is requested go to it as it is rewritecond %{document_root}%{request_uri} -f [or] rewritecond %{document_root}%{request_uri} -d rewriterule ^ - [l] # if the requested resource doesn't exist, use index.html rewriterule ^ /index.html
-
nginx:使用
try_files
指向index.html
,详细描述见web 应用的前端控制器模式。
try_files $uri $uri/ /index.html;
-
iis:往
web.config
中添加一条重写规则,类似于:
<system.webserver> <rewrite> <rules> <rule name="angular routes" stopprocessing="true"> <match url=".*" /> <conditions logicalgrouping="matchall"> <add input="{request_filename}" matchtype="isfile" negate="true" /> <add input="{request_filename}" matchtype="isdirectory" negate="true" /> </conditions> <action type="rewrite" url="/index.html" /> </rule> </rules> </rewrite> </system.webserver>
github 页面服务:你没办法 github 的页面服务,但可以添加一个 404 页,只要把
index.html
复制到404.html
就可以了。 它仍然会给出一个 404 响应,但是浏览器将会正确处理该页,并正常加载该应用。 使用 并也是一个好办法。firebase 主机服务:添加一条。
"rewrites": [ { "source": "**", "destination": "/index.html" } ]
docker 部署
我使用了 docker 部署,最后部署在 nginx 下了,按上面的提示在 nginx 配置中配置 try file
,修改 nginx 默认配置文件如下:
server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
在打包 docker 镜像时替换默认的 nginx 配置,dockerfile 如下所示:
from node:12-alpine as builder # set working directory workdir /app # install and cache app dependencies copy package.json . run npm install # build the angular app copy . . run npm run build from nginx:alpine # copy from dist to nginx root dir copy --from=builder /app/dist/reservationclient /usr/share/nginx/html # expose port 80 expose 80 # set author info label maintainer="weihanli" copy ./conf/nginx.default.conf /etc/nginx/conf.d/default.conf # run nginx in foreground # https://*.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting cmd ["nginx", "-g", "daemon off;"]
按上面的 dockerfile 打包之后前端路由就可以正常使用了~~
我的 angular 做的活动室预约客户端体验地址:
reference
上一篇: MySQL简单查询和单表查询
下一篇: Bootstrap-实现简单的网站首页
推荐阅读
-
关于maven项目中修改的JS不生效的解决方案
-
angular 前端路由不生效解决方案
-
关于Linux系统(Ubuntu14.04)上QComboBox设置qss样式表字体颜色color属性不生效或只对下拉列表生效的解决方案
-
springboot aop 不生效的原因和解决方案
-
Android activity动画不生效原因及解决方案总结
-
推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架
-
angular富文本解析,内置样式不生效问题
-
关于maven项目中修改的JS不生效的解决方案
-
docker swarm外部验证负载均衡时不生效的解决方案
-
angular 前端路由不生效解决方案