Angular部署Google Cloud后除首页外访问报Cannot GET /page错误如何解决
问题原因
- 这是单页应用(SPA)部署到静态服务器的典型路由问题:Angular的路由逻辑全部在前端执行,服务器默认只会匹配真实存在的静态文件路径,你访问的
/pagename这类路径不存在对应实体文件,所以返回404。 - 你当前的
app.yaml配置仅对根路径/做了index.html返回规则,其他路径没有对应的兜底规则。
调整后的完整配置
runtime: python27 api_version: 1 threadsafe: true handlers: # 第一步:匹配所有带后缀的静态资源,直接返回对应文件 - url: /(.*\.(js|css|png|jpg|svg|ico|json|woff|woff2|ttf|eot))$ static_files: dist/X691Website/\1 upload: dist/X691Website/.*\.(js|css|png|jpg|svg|ico|json|woff|woff2|ttf|eot)$ # 第二步:兜底规则,所有其他路径全部返回index.html,交给Angular处理前端路由 - url: /.* static_files: dist/X691Website/index.html upload: dist/X691Website/index.html skip_files: - e2e/ - node_modules/ - src/ - coverage - ^(.*/)?\..*$ - ^(.*/)?.*\.json$ - ^(.*/)?.*\.md$ - ^(.*/)?.*\.yaml$ - ^LICENSE
核心修改点说明
- 调整了handler的匹配顺序:GAE的handler是从上到下匹配的,优先匹配静态资源规则,保证页面需要的样式、脚本、图片等资源能正常加载
- 新增了全路径兜底规则:用
/.*匹配所有未命中静态资源的请求,统一返回index.html,Angular加载完成后会自动根据当前路径渲染对应页面 - 删掉了原来重复的根路径静态目录规则,避免规则冲突
内容的提问来源于stack exchange,提问作者R.Rasheed
相关产品推荐
相关产品推荐

