Flask 前端工作正常，但是里面的 svelte 应用程序却不能正常工作，我缺少什么

Question

我一直在努力解决这个例子https://github.com/cabreraalex/svelte-flask-example。我创建了一个更简单的示例here 当我运行 server.py 时，我得到了模板，在源代码中我什至看到了 main.js。当我转到 /rand 时，我看到随机生成的数字，但是我丢失了一些东西，因为我无法让 App.svelte 工作。 这是 server.py 包含的内容：

@app.route('/home')
def base():
    return send_from_directory('templates/', 'index.html' )

@app.route('/static/<path:path>')
def home(path):
    return send_from_directory('', path)

@app.route('/rand')
def rand():
    return str(randint(0,100))

index.html 有

<script src="../static/main.js" defer></script>

主要JS导入svelte App

import App from './App.svelte'

const app = new App({
    target: document.querySelector('#svelte-app')
})

Svelte 应用程序本身：

<script>
    let rand = -1

    function getRand(){
        fetch('./rand')
            .then(d => t.text())
            .then(d => (rand = d));

    }
</script>

<h1> your number is: {rand}</h1>
<button on:click={getRand}>Get a random number</button>

我对flask和JS的组合是全新的，所以提前抱歉。

Answer 1

我假设您在创建 Svelte 项目时安装了 Node.js 并使用了 Svelte 网站上的说明。

使用 Svelte 无法将源代码直接导入 HTML 页面。需要先用

npm run build

来构建项目。这将生成最终代码，可以在“public/build”文件夹中找到该代码。当您使用

npm run dev

启动开发服务器并修改其中一个文件时，也会经常发生这种情况。
如果您已执行此步骤，则可以使用 Flask 提供“public”目录及其子目录中的所有文件。因为那是最终产品发布的地方。

为了通过开发服务器将请求转发到 Flask 服务器，有必要安装插件并定义代理。我使用了 “rollup-plugin-dev” 插件并对“rollup.config.js”文件进行了以下简单修改。

import localdev from 'rollup-plugin-dev';

// ...

    plugins: [
        // ...

        // This is the proxy definition
        !production && localdev({
            dirs: ['public'],
            host: 'localhost',
            port: 8080,
            proxy: [
                {
                    from : '/rand',
                    to: 'http://localhost:5000/rand'
                }
            ],
        }),

        // This line is now no longer needed.
        // In dev mode, call `npm run start` once
        // the bundle has been generated
        // !production && serve(),

        // ...
    ], 
    // ...

然后您可以稍微简化您的 Flask 应用程序。这里参数

static_folder

应指向您的 svelte 应用程序的“public”文件夹。

from flask import Flask
from random import randint

app = Flask(__name__,
    static_url_path = '',
    static_folder='../client/public/'
)

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

@app.route('/rand')
def rand():
    return str(randint(0,100))

顺便说一句，我必须告诉您，您的 fetch 调用的 then 块中有一个小拼写错误。以下调用不应引发错误。

fetch('./rand')
    .then(r => r.text())
    .then(d => (rand = d));

祝您在实施项目过程中获得乐趣并取得成功。