Vue（Vite搭建）结合Flask页面加载失败：MIME类型为text/html而非JavaScript

1. 确保前端完成正确打包 #

使用Vite打包前端项目，生成dist目录：

npm run build

2. 配置Flask正确托管静态资源 #

报错核心是Flask未正确返回ES模块的MIME类型（应为application/javascript），反而返回了text/html，通常是静态资源路由配置错误导致。以下是两种可行配置方式：

方式一：直接指定静态与模板目录 #

修改Flask主文件代码：

from flask import Flask, render_template

app = Flask(__name__, 
            static_folder='dist',  # 将静态文件目录指向Vite打包后的dist
            template_folder='dist')  # 模板目录同步指向dist（index.html在此目录）

# 处理SPA路由 fallback，所有路径都返回index.html
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return render_template('index.html')

方式二：用send_from_directory精细控制 #

from flask import Flask, send_from_directory, render_template

app = Flask(__name__)

# 单独处理静态资源请求，返回dist下的对应文件
@app.route('/<path:filename>')
def serve_static(filename):
    return send_from_directory('dist', filename)

# 主路由与SPA fallback
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    return render_template('dist/index.html')

3. 检查Vite基础路径配置 #

若打包后资源路径异常，修改vite.config.ts设置正确的base路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/'  // 确保资源以根路径加载，避免Flask无法定位
})

4. 启动验证 #

确保dist目录与Flask主文件处于同一层级，启动Flask：

flask run

访问http://localhost:5000，检查控制台是否仍存在MIME类型错误。

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