FastAPI模板中Vue.js无法识别的问题求助

核心问题分析 #

1. Jinja2与Vue模板语法冲突
   FastAPI使用的Jinja2模板引擎和Vue默认都用{{ }}作为变量插值符号。Jinja2会优先解析页面中的{{ count }}和{{ message }}，但你的模板上下文里没有传入这些变量，导致渲染后这些内容被清空，Vue无法识别自己的模板语法。

2. JS文件路径不匹配
   你的项目中JS文件是/static/js/myapp.js，但index.html里引用的是/js/app.js，路径错误会导致无法加载正确的Vue逻辑代码。

3. HTML语法错误
   index.html的<head>里多了一个闭合的</script>标签，属于无效语法，可能干扰脚本加载。

4. 模块作用域问题
   script标签使用type="module"时，模块有独立作用域，全局挂载的Vue对象可能无法直接访问（虽然Vue.global.js会挂载到window，但模块里需要显式引用window.Vue）。

具体修复步骤 #

1. 修复index.html #

<head>
    <meta charset="UTF-8">
    <title>Learning Vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 用Jinja2的raw标签包裹Vue模板，避免Jinja2解析 -->
    {% raw %}
    <div id="app">
        {{ count }} = {{message}}
        <h1>Hello, Vue :) </h1>
        <button @click="push_button"> ok </button>
    </div>
    {% endraw %}
    <!-- 修正JS文件路径，移除type="module" -->
    <script src="{{ url_for('static', path='/js/myapp.js') }}"></script>
</body>

2. 可选：修改Vue的模板分隔符（替代raw标签） #

如果不想用Jinja2的raw标签，可以在Vue实例中修改分隔符，避免和Jinja2冲突：
修改myapp.js：

const app = Vue.createApp({
    delimiters: ['[[', ']]'], // 修改Vue的插值分隔符
    data() {
        return {
            count: 100, message: "Hallo"
        }
    },
    methods: {
        push_button() {
            this.count++
        }
    }
});

app.mount("#app")

同时把index.html中的{{ count }} = {{message}}改成[[ count ]] = [[message]]。

3. 修复my_app.py的导入问题 #

确保你导入了必要的模块，否则运行会报错：

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def get(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

4. 验证JS文件路径 #

确保/static/js/myapp.js存在，文件名和路径完全匹配。

测试验证 #

启动FastAPI应用后，访问根路径：

• 页面应显示100 = Hallo
• 点击按钮，count值会递增

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