### Vue.js 前端项目与 Flask 后端集成 #### 创建简单的 Flask 应用程序 为了使 Vue.js 和 Flask 能够协同工作，首先需要创建一个基本的 Flask Web 服务器来处理来自前端的应用编程接口 (API) 请求。 ```python from flask import Flask, jsonify, request app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): response = { "message": "Data from Flask backend" } return jsonify(response) if __name__ == '__main__': app.run(debug=True) ``` 这段代码定义了一个名为 `/api/data` 的路由，它返回 JSON 数据给调用者[^1]。 #### 使用 Axios 在 Vue 中发起 HTTP 请求 接下来，在 Vue 组件内部利用 Axios 来发送 GET 请求到上述设置好的 Flask API 地址，并显示接收到的信息。 ```html <template> <div id="app"> <p>{{ serverMessage }}</p> </div> </template> <script> import axios from 'axios'; export default { name: 'App', data() { return { serverMessage: '' }; }, mounted() { this.fetchServerData(); }, methods: { async fetchServerData() { try { const result = await axios.get('http://localhost:5000/api/data'); this.serverMessage = result.data.message; } catch (error) { console.error(error); } } } } </script> ``` 此部分展示了如何配置 Vue 实例以连接至 Flask 提供的服务并动态更新页面上的消息内容[^3]。 #### 单文件组件的优势 值得注意的是，上面的例子采用了单文件组件的形式编写 Vue 文件。这种做法不仅有助于保持良好的编码习惯，还简化了维护过程中的复杂度[^4]。 #### 部署注意事项 对于生产环境下的部署方案而言，建议采用前后端分离的方式分别托管静态资源和后端服务。这意味着可以将构建后的 Vue 应用上传至 CDN 或其他支持静态网站发布的平台；与此同时，把 Flask 设置成独立运行的服务实例[^2]。