【前言】這里使用的技術棧：fastapi+vue3+pycharm

一、創建vue3項目

在項目的文件夾使用下面命令創建vue3前端框架代碼

npm create vite@latest frontend

選擇框中選擇：

• Framework: Vue
• Variant: JavaScript 或 TypeScript

cd frontend
npm install

啟動本地開發

npm run dev

一、vue3項目編寫代碼

在frontend>src>App.vue中編寫網站首頁的代碼，如下面

<script setup>
const name = '世界'
</script><template><h1>你好，{{ name }}！</h1>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

npm run dev啟動項目就可以在本地愉快地編寫代碼啦！

三、打包發布

代碼在本地編寫調試完成后就可以打包發布了

在frontend\vite.config.js文件修改靜態資源路由

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({base: './',   // 增加這個代碼plugins: [vue()],
})

然后運行命令打包靜態資源文件，自動生成dist文件夾

cd frontend
npm run build

四、fastapi部署上線

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse, PlainTextResponse
import uvicornapp = FastAPI()# 靜態文件托管（JS, CSS, 圖片等）
app.mount("/", StaticFiles(directory="../frontend/dist", html=True), name="static")# 首頁路由，返回 index.html
@app.get("/")
async def read_index():return FileResponse("../frontend/dist/index.html")if __name__ == '__main__':uvicorn.run("main:app", host="127.0.0.1", port=8080)