使用烧瓶（1 个服务器）提供简单的 vuejs 页面答案

【问题标题】：Serve simple vuejs page with flask (1 server)使用烧瓶（1 个服务器）提供简单的 vuejs 页面
【发布时间】：2020-12-22 01:03:14
【问题描述】：

互联网上充斥着使用 Flask (api) 和 Vue.js (client) 提供的应用程序示例，但由于 Vue 是一个 SPA，因此也可以使用 Flask 来提供它。我没有找到任何帮助，尤其是应用程序存储在外部 js 中。

使用 Firefox 时出现不允许类型的错误：

从“http://localhost:5000/static/App”加载模块被阻止因为不允许的 MIME 类型（“text/html”）。

在 Chrome 上，我只是找不到文件，因为它试图获取 App 文件而不是 App.vue。

这是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 {% raw %}
  <div id="app">
   {{ message }}
  </div>
 {% endraw %}

</body>
<script type="module" src="{{ url_for('static', filename='myvue.js') }}"></script>
</html>

myvue.js

import App from './App.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

app.vue（简单地从 SO 上的另一个示例中获得）：

<template>
<div id="app">
    <h1>My Todo App!</h1>
    <!-- <TodoList/> -->
</div>
</template>

请注意，{{message}} 在那里是无用的，可以删除。我怀疑模板也是错误的，但我无法达到这一点。我希望能够在没有 CLI 的情况下工作，或者至少能够自己完成所有工作以避免另一层依赖（npm 用大量已弃用的东西吓到我）

【问题讨论】：

标签： vue.js flask

【解决方案1】：

在我看来，从 Flask 提供 Vue SPA 应用程序并没有什么意义。你到底想达到什么目的？

如果您希望设置 SPA 应用程序可以访问 Flask 服务器上的数据的配置，那么典型配置是使用 CLI 和 Node 构建 VueJS SPA 应用程序，然后直接从您的 Web 服务器交付编译的构建（例如 Apache、IIS）。没有理由通过 Flask 传递 SPA 应用程序，这样做只会增加一堆开销。

使用 Flask 公开一个 REST API，您的 SPA 应用可以调用（例如使用 AXIOS）来检索/写入数据等。

【讨论】：

原因很简单：我希望人们能够获取我的应用程序并在本地使用它，而无需安装 2 个服务器。如果可能的话，我也希望能够以这种方式进行开发。
每个人都有他自己的，但是在盒子上安装一个网络服务器会更快，而不是试图强制 Flask 进入你不希望用于生产的配置。