Flask与Vue.js集成遇500内部错误及TemplateNotFound问题求助

一、优先解决TemplateNotFound核心问题 #

Flask默认从与主程序文件同级的templates文件夹读取模板，先确认项目结构是否符合要求：

你的项目根目录/
├── venv/                  # 虚拟环境文件夹
├── templates/             # 必须和Flask主文件处于同一层级
│   └── index.html         # 模板文件
├── app.py                 # 你的Flask主程序文件
└── vue-project/           # Vue项目文件夹（vue-cli创建的项目）

排查与修复点 #

1. 模板路径校验

   • 若你把templates放在Vue项目文件夹内，Flask无法定位，需将其移至Flask主文件同级目录。
   • 也可手动指定模板路径，修改Flask初始化代码：

     app = Flask(__name__, template_folder="/你的绝对路径/templates")
     

2. index.html内容适配
   开发阶段需让Flask加载Vue dev server的资源，index.html可参考如下写法：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <title>网络测速工具</title>
   </head>
   <body>
       <div id="app"></div>
       <!-- 加载Vue开发服务的JS资源，端口对应Vue默认的8080 -->
       <script src="http://localhost:8080/js/app.js"></script>
   </body>
   </html>
   

二、WebSocket跨域问题修复 #

Vue开发服务默认运行在8080端口，Flask在5000端口，直接连接会触发跨域拦截，需给Flask-SocketIO添加跨域配置：

socketio = SocketIO(app, cors_allowed_origins="*")  # 开发阶段允许所有跨域，生产环境需指定具体域名

三、Vue组件功能补全 #

你的SpeedTest.vue存在两处功能缺失，修复后代码如下：

<template>
  <div>
    <h1>测速结果</h1>
    
    <div class="result">
      <p>延迟：{{ pingTime || '测试中...' }} ms</p>
    </div>

    <div class="result">
      <p>下载速度：{{ downloadSpeed || '测试中...' }} Mbps</p>
    </div>

    <div class="result">
      <p>上传速度：{{ uploadSpeed || '测试中...' }} Mbps</p>
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      pingTime: null,
      downloadSpeed: null,
      uploadSpeed: null
    };
  },
  mounted() {
    const socket = io('http://localhost:5000');

    socket.on('connect', () => {
      console.log('已连接到后端服务');
    });

    // 监听后端返回的测速结果
    socket.on('ping_test_result', (data) => {
      this.pingTime = data.pingTime;
    });

    socket.on('download_test_result', (data) => {
      this.downloadSpeed = data.downloadSpeed;
    });

    socket.on('upload_test_result', (data) => {
      this.uploadSpeed = data.uploadSpeed;
    });

    // 触发测速请求
    socket.emit('ping_test');
    socket.emit('download_test');
    socket.emit('upload_test');
  },
};
</script>

四、开发阶段运行流程 #

1. 启动Flask服务：在虚拟环境中执行python app.py
2. 启动Vue服务：进入Vue项目文件夹，执行npm run serve
3. 访问http://localhost:5000（而非Vue的8080端口），即可查看测速结果

五、生产环境部署建议 #

生产阶段需先执行npm run build打包Vue项目，将生成的dist文件夹内的静态资源移至Flask的static文件夹，再修改index.html加载本地静态资源，实现Flask对Vue静态文件的托管。

内容的提问来源于stack exchange，提问作者phoenixcode99