vue+flask中空白页的问题

最新推荐文章于 2022-10-31 19:58:26 发布

weixin_30457465

最新推荐文章于 2022-10-31 19:58:26 发布

阅读量535

点赞数 1

文章标签： python javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/rucnevermore/p/8330505.html

版权

最近踩到了一个前后端开发中遇到的坑，特此记录。。。

前端页面用vue开发完毕，后端用flask开放了若干个http接口为前端页面提供数据，用npm run dev和flask分开测试过一起正常。下一步是想把vue打包后的静态页面部署到flask中一起工作，按照文档中的步骤，用npm run build得到dist文件夹，把里面的index.html和static目录拷贝到flask代码的根目录下，flask的app和路由设置如下，

1 app = Flask(__name__, template_folder='.')
2 CORS(app)
3 services = Services()
4 
5 @app.route('/')
6 def index():
7     return render_template("index.html")

这里是把‘/’的访问交给前端路由去做，结果运行后发现是一个空页面。从页面上的源码上看确实是index.html，只是没有进行渲染，

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>vue-demo</title>
    <link href=./static/css/app.4f57f0d136e7fc1fe56683f5944b7c7a.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.0c61b4841853f88337e3.js></script>
<script type=text/javascript src=./static/js/vendor.140890c7f7e72d295083.js></script>
<script type=text/javascript src=./static/js/app.bbfee91d48913aa9e49a.js></script>
</body>
</html>

起初怀疑是flask环境中对vue的支持不够，于是把当前的vue静态文件替换成vue初始的那个hello world页面，结果发现一切正常，所以排除是flask环境的问题。网上的答案大部分都指向静态文件中的css，js的路径问题，但是经过仔细检查后发现路径并没有什么问题，不仅页面上可以直接访问这些css，js，而且后台也是返回200。忽然一下就没有头绪了，于是只好跑到网上一顿乱搜看看是否有灵感，结果N多回答都是转载同一个帖子[无语]，后来找到一篇帖子提到了前端路由和后端路由的问题，于是想到我的前端路由中确实没有设置'/'的访问，

export default new Router({
    mode: 'history',
    routes: [{
            path: '/hello',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/profile',
            redirect: '/profile/upload',
            name: 'ProfileView',
            component: ProfileView,
            children: [{
                    path: "upload",
                    component: ProfileUpload
                },
                {
                    path: "all",
                    component: ProfileAll
                }
            ]
        }
    ]
})

这样就会导致后端路由中的'/'访问不到前端路由中任意一个可以访问的节点！于是加上，

{
   path: '/',
   redirect: '/profile',
   name: 'default'
},

界面终于出来。。。而且有一个很有趣的现象就是浏览器直接访问/profile/upload是会报错的，只有通过'/'才能间接访问到！

这个坑主要还是因为对前端后端开发没有经验导致的，可能这么做也不是最优解，但是也算是学到了不少东西~

转载于:https://www.cnblogs.com/rucnevermore/p/8330505.html

weixin_30457465

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫