Flask 和 Vue.js 开发及整合部署实例

想做些简单的 Web 工具，首先想到的是 Flask + Vue.js, 当然可以完全用 Flask 自己的页面模板 Jinja2, 但一个网站项目不能享受到像 Vue.js, React 类似框架的灵活性真是太可惜了。于是 Flask 只专注于 API, 页面逻辑全用 Vue.js 的组合就成了我的首选，Flask 方面还能进一步选择 FlaskRESTful 框架。还需做得更漂亮的话，CSS

Yanbin_Q

2779人浏览 · 2020-07-08 06:43:45

Yanbin_Q · 2020-07-08 06:43:45 发布

本文主要参考 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的前部分，英文原文在这里 Developing a Single Page App with Flask and Vue.js。

开发过程中我们可以保持 Flask 和 Vue.js 为单独的两个项目，并启动各自的服务，比如 Flask 是 http://localhost:5000, Vue.js 项目通过 npm run serve 启动在 http://localhost:8080，借助于 node js 的功能，修改 Vue.js 项目的内容能够自动刷新网页。要是开发中把静态文件全放在 Flask 项目中，那么任何对静态文件的修改都必须重启 Flask 服务。虽然 Debug 模式启动的 Flask 在看到它的目录中有任何修改时也能自动重启，但对静态文件的修改重启 Flask 没这个必要性。

但部署时需进一步整合，最终只需要启动 Flask 服务，而无须两个，方便部署。如果是以 Docker 容器的方式发布，使用 docker-compose 来编排两个容器来发布也还算不错。更专业的部署方式应该是 Vue.js 的静态内容放到专门的 Web 服务器，如 Apache/Nginx 中，Flask 也通过 wsgi 与 Web 服务器集成起来。阅读全文 >>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^