vue+flask中空白页的问题
最近踩到了一个前后端开发中遇到的坑，特此记录。。。
前端页面用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是会报错的，只有通过'/'才能间接访问到！
这个坑主要还是因为对前端后端开发没有经验导致的，可能这么做也不是最优解，但是也算是学到了不少东西~
