404 单页应用 报错 路由_使用 Vue.js 和 Flask 实现全栈单页面应用

原标题：使用 Vue.js 和 Flask 实现全栈单页面应用

本文分享自众成翻译，介绍了一个将热门前端技术 Vue.js 与流行 Python 后端框架 Flask 结合的简单示例。推荐有兴趣采用类似技术栈的同学看看。

译者：枫林

链接：http://www.zcfy.cc/article/4491

原文：https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532

在本教程中，我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。

如果你只是想使用 Vue.js 库和 Flask 模板基本上是没什么问题的。但...好吧，其实还是有一个比较显而易见的问题：跟 Vue.js 一样，Jinji(模板引擎)也是使用双大括号来渲染页面，但已经有一个很好的解决方案 在这里 了。

我想要一个跟上面方案有点不同的例子。如果我要一个用 Vue.js(使用单页面组件，在 vue-router开启 HTML5 history 模式，还有使用其他一些非常棒的特性)框架的单页面和 Flask 做后台服务的应用？应该能按下面的要求工作：

Flask运行的服务可以访问 index.html首页和 Vue.js 应用

在前端开发环境，使用 Webpack 和它提供的很多非常棒的功能

可以从前端的单页面应用访问 Flask 的 API 接口

以 Node.js 服务运行的前端开发环境同样也可以访问 API 接口

这看起来很有趣，不是吗？那就让我们开始吧。

你可以在github上查看所有的源代码：

https://github.com/oleg-agapov/flask-vue-spa客户端

我用 vue-cli 命令行工具搭建起 Vue.js 的基础框架。如果你还没有安装，可以运行：

$ npm install-g vue-cli

客户端和后端代码将会放到不同的文件夹下，初始化前端部分执行如下操作：

$ mkdir flaskvue

$ cd flaskvue

$ vue init webpack frontend

以下是我通过安装向导的项目设置：

Vue build — Runtime only (Vue 构建的版本 - 运行时)

Install vue-router? — Yes (安装 vue-router？ - 是)

Use ESLint to lint your code? — Yes (使用 ESLint 校验你的代码？ - 是)

Pick an ESLint preset — Standard (选择 ESList 的预置版本 - 标准)

Setup unit tests with Karma + Mocha? — No (使用 Karma + Mocha 设置单元测试？ - 否)

Setup e2e tests with Nightwatch? — No (使用 Nightwatch 设置端到端测试？ - 否)

下一步：

$ cd frontend

$ npm install

# after installation

$ npm run dev

现在你可以开始设置 Vue.js 应用了。让我们先来添加些页面吧。

添加 Home.vue和 About.vue到 frontend/src/components文件夹。像如下简单添加些内容：