如何配置Vite的dist目录结构以适配Python Flask框架

直接上可生效的vite.config.js配置，配合Flask的简单设置就能实现你要的目录结构：

1. Vite配置调整 #

import { defineConfig } from 'vite'
// 替换成你用的框架插件，比如React、Vue等
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 开发环境用根路径，生产环境用相对路径指向static目录
  base: process.env.NODE_ENV === 'production' ? '../static/' : '/',
  build: {
    // 把HTML模板输出到dist/templates
    outDir: '../dist/templates',
    // 把静态资源输出到dist/static（相对于outDir的路径）
    assetsDir: '../static',
    rollupOptions: {
      // 明确指定入口HTML，确保输出位置正确
      input: {
        main: './index.html'
      }
    }
  },
  // 可选：开发时代理API请求到Flask服务
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
})

配置说明 #

• base：开发模式用/保证Vite热更新正常；生产模式用../static/，因为index.html在dist/templates，需要向上一级找到dist/static下的资源。
• build.outDir：指定HTML文件的输出目录，根据你的项目结构调整路径（如果前端代码和Flask同根目录，改成./dist/templates即可）。
• build.assetsDir：让Vite把JS/CSS/图片等资源输出到outDir的上级目录static，最终形成dist/static结构。

2. Flask配置调整 #

修改Flask应用的模板和静态文件目录指向：

from flask import Flask, render_template

app = Flask(
    __name__,
    template_folder='./dist/templates',  # 指向Vite生成的模板目录
    static_folder='./dist/static',      # 指向Vite生成的静态资源目录
    static_url_path='/static'           # 浏览器访问静态资源的URL前缀
)

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

if __name__ == '__main__':
    app.run(debug=True)

3. 验证效果 #

执行npm run build后，你的project/dist目录结构会变成：

project/dist/
├── templates/
│   └── index.html
└── static/
    ├── assets/
    │   ├── main.[hash].js
    │   └── style.[hash].css
    └── 其他静态资源（图片、字体等）

此时Flask启动后，访问根路径会正确加载index.html，并且所有静态资源的引用路径会被Flask正确解析。

开发模式适配 #

开发时直接启动Vite的dev server（npm run dev），通过代理配置可以让前端请求的/api路径转发到Flask服务，同时享受Vite的热更新功能；生产环境则用Flask直接托管构建后的静态文件和模板。

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