使用Flask部署打包后的Vitejs应用时遇到加载异常问题

问题原因 #

Vite打包后的资源引用路径（如/assets/index-xxx.js）无法被当前Flask配置正确映射到dist目录下的实际文件，导致这些资源请求返回了index.html，浏览器将HTML当作JS解析，从而触发语法错误。

解决方案 #

方案一：调整Vite配置适配Flask静态资源规则

1. 在Vite项目的vite.config.js中设置base为Flask默认的静态URL前缀：

import { defineConfig } from 'vite'
// 保留你的原有插件配置（如Vue/React相关）

export default defineConfig({
  base: '/static/',
  // 其他原有配置项
})

2. 重新执行打包命令：

npm run build

此时dist/index.html中的资源引用会自动改为/static/assets/xxx.js格式，适配Flask的静态资源处理规则。
3. 修改app.py的根路由，改用render_template返回首页：

@app.route('/')
def index():
    return render_template('index.html')

方案二：在Flask中添加路由映射资源路径

如果不想修改Vite配置，直接给Flask添加对应路由处理资源请求：

1. 在app.py中添加静态资源路由（需放在根路由或catch-all路由之前）：

@app.route('/assets/<path:filename>')
def serve_assets(filename):
    return send_from_directory('./dist/assets', filename)

@app.route('/images/<path:filename>')
def serve_images(filename):
    return send_from_directory('./dist/images', filename)

@app.route('/JSON/<path:filename>')
def serve_json(filename):
    return send_from_directory('./dist/JSON', filename)

@app.route('/markdown/<path:filename>')
def serve_markdown(filename):
    return send_from_directory('./dist/markdown', filename)

2. 若为单页应用（含前端路由），添加catch-all路由处理页面刷新场景（需放在所有静态资源路由之后）：

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return render_template('index.html')

验证 #

修改完成后重新运行flask run，检查浏览器网络请求，确认/assets/xxx.js等资源返回的是正确的JS文件，页面即可正常渲染。

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