vue 包含前端路由的项目，部署时如何跟后端路由结合起来？

This topic created in 2281 days ago, the information mentioned may be changed or developed.

如题，新手在测试前端路由

在前端实现路由以后，比如localhost:8080/index和localhost:8080/home绑定到了两个不同的组件

然后我想 npm run build，把生成的前端文件使用 flask 做服务器跑。

测试得到的实际结果是

在测试状态下使用 node 运行的 npm run serve 服务器，前端路由功能正常，手动输入路由地址也会按照设定的前端路由逻辑执行。

部署之后的 flask 服务器，如果单纯使用 js 内容进行链接跳转（比如使用 <router-link> 标签跳转），前端路由也是工作正常的。但是如果手动输入地址的话则会请求后端路由，而不会被前端路由拦截。（后端没有挂载相应的路由地址，所以返回 404 ）</router-link>

想请教一下各位带佬这个前后端路由结合的部署该怎么搞。我想实现两个阶段的目标 1、一阶段是实现浏览器地址栏输入的所有跳转命令由 vue 拦截，使前端路由完全工作正常，不发送给 flask 2、二阶段是在一阶段的基础上我希望有一些路由被过滤掉，比如特定 api 的 get 或 post 地址，或者特定页面（比如登录页面），不由前端托管，仍然是直接请求后端（比如单独把不需要登录权限的页面，和需要权限的页面拆分出来做成两个页面，感觉安全性比较高）

请问可以实现吗

Supplement 1 · Mar 8, 2020

破案了

对这个疑问的一个解释是，如果后端将路由返回给前端，比如输入 localhost/home，后端只需要按正常渲染模板，前端模板会自动识别这个地址，并且解析到对应位置。

不可避免的一点是似乎生产环境无法实现浏览器输入网址不跳转，总归是要刷新一下界面的

前端路

flask

后端路

页面

15 replies • 2020-03-09 20:49:55 +08:00

moyupoi

Mar 8, 2020 via iPhone

初始化时候吧路由请求下来，然后放 redux 里，用的时候取就行了

randyo

Mar 8, 2020 via Android

地址栏输入地址回车是一定需要后端路由的。后端需要返回入口页面。

TmacV2

Mar 8, 2020 via iPhone

新手同问

black11black

Mar 8, 2020

@moyupoi
@randyo

额，搜了一下 redux 好像是 react 组件，我这是 vue。所以大概思路就是，比如上面说的无论 /index 和 /home，实际上都是从本地 index.html 模板渲染出来的，比如我想在浏览器里访问 /home，需要后端截取路由然后用某种 carry 的方式跟 vue 交互，先打开 index 再跳转 home ？

不过这么搞的话，前端路由说是优点是不用重载页面，这还是得重载啊

moyupoi

Mar 8, 2020 via iPhone

redux 只是名字和 react 差不多，实际上 redux 只是个中间件做状态管理，给谁用都行。你用 redux 也可以，用 vuex 也可以，只是把数据存储在缓存里，用的时候拿出来用，减少接口重复调用，也保证了跨页面同步数据

lupkcd

Mar 8, 2020

hash/history 模式了解一下

randyo

Mar 8, 2020 via Android

@black11black 刷新页面浏览器请求后端，拿到 index 页面的内容，然后开始解析，加载 js 并执行，js 根据地址栏来确定要渲染哪个页面。一切都是从 index 开始的。

shintendo

Mar 8, 2020

官方文档明明很清楚
https://router.vuejs.org/zh/guide/essentials/history-mode.html#html5-history-%E6%A8%A1%E5%BC%8F

gwy15

Mar 8, 2020

我梳理下楼主的逻辑，是不是这样的：
前端引入 router 负责（部分不需要权限页面的）路由，但是后端（ flask ）也要管理部分需要鉴权的页面； API 部分还是由 flask 做。

问题就在于如何在前端负责路由的页面和后端负责路由的页面之间进行跳转。

这种杂交模式有点难受啊 XD

不过应该可以实现，后端 nginx 像这样写：
location / {
try_files @flask_app /index.html =404;
}
会先尝试匹配 flask，没匹配到路由全部返回 SPA 渲染的 html。

前端跳转对 route 里面的 meta 进行判断，如果需要鉴权使用正常跳转（ location ），不需要鉴权直接用 router.push。

thetbw

Mar 8, 2020 via Android

后端处理一下 404 错误，全都返回 vue 的 index.html，然后 vue 这时不就可以处理了吗，vue 如果没这个路由，由 vue 来处理 404 错误。不知道你觉得这样如何

black11black

Mar 8, 2020

@gwy15

感谢，nginx 配置是一个很好的 route 思路。
我的方案不用 nginx 也配出来了，更在 append 里。

杂交主要的考量是看 vue 路由文档似乎有权限功能，没仔细看不知道是咋实现的，我窃以为即使后端做好权限管理，最好还是在无权限时不发送任何前端界面数据以避免攻击。不知道单纯使用前端路由的话能否实现在非认证状态下用户拿不到任何非认证界面之外的数据

gwy15

Mar 8, 2020

@black11black 理论上是可以的，比如动态加载路由、把涉及到鉴权的静态文件要求 CDN 鉴权、给 nginx 加上 JWT 插件等等操作。但是这样仅仅能解决暴露静态文件给非授权用户，我认为即使将静态文件暴露给非授权用户并不是什么大不了的问题，与这一堆操作的成本不成正比。

black11black

Mar 8, 2020

@gwy15
我觉得问题也不大，应该不用一定 nginx 重定向，可以服务端加个中间件搞定。

suningyo

Mar 9, 2020

history 模式吗官方文档里有例子

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

yimity

Mar 9, 2020

配置一下服务端或者服务端的软件，404 的时候返回 index.html 就可以了。

vue 包含前端路由的项目，部署时如何跟后端路由结合起来 ？

vue 包含前端路由的项目，部署时如何跟后端路由结合起来？