为带有Flask的简单vuejs页面提供服务(1个服务器) [英] Serve simple vuejs page with flask (1 server)
问题描述
Internet上充满了Flask(api)和Vue.js(客户端)提供服务的应用程序示例，但是由于Vue是SPA，因此也可以将其与flask一起使用.我没有找到任何帮助，尤其是在将应用程序存储在外部js中的地方.
Internet is full of examples of applications served with Flask (api) and Vue.js (client), but since Vue is a SPA it make sense to serve it with flask as well. I didn't find any help, especially where the App is stored in an external js.
使用Firefox时，我收到错误的错误提示:
With Firefox I get error for a disallowed type:
从"http://localhost:5000/static/App"加载模块被阻止由于存在不允许的MIME类型("text/html").
Loading module from "http://localhost:5000/static/App" was blocked because of a disallowed MIME type ("text/html").
在Chrome上，我只是找不到文件，因为它试图获取App文件而不是App.vue.
On Chrome I just get file not found since it tries to get the App file instead of 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上的另一个示例获得):
The app.vue (simply got from another example on SO):
<template>
<div id="app">
<h1>My Todo App!</h1>
<!-- <TodoList/> -->
</div>
</template>
请注意，{{message}}在那里没有用，可以将其删除.我怀疑模板也是错误的，但我无法达到目标.我希望能够在不使用CLI的情况下工作，或者至少能够自己完成所有工作，以避免另一层依赖关系(npm使大量不推荐使用的东西吓到我了)
Note that the {{message}} is useless there and can be removed. I suspect the template is also wrong, but I can't reach that point. I'd like to be able to work without the CLI or at least being able to do all by myself to avoid another layer of dependencies (npm scares me with the huge list of deprecated stuff)
推荐答案
从Flask到我的脑海里提供Vue SPA应用程序真的没有任何意义.您实际上想实现什么?
It doesn't really make sense to serve a Vue SPA app from Flask to my mind. What are you actually trying to achieve?
如果您要设置SPA应用程序可以访问Flask服务器上的数据的配置，那么典型的配置是使用CLI和Node构建VueJS SPA应用程序，然后直接从Web服务器交付已编译的构建(例如Apache，IIS).没有理由通过Flask通过管道传递SPA应用程序，而这样做只会增加一堆开销.
If you are looking to setup a configuration where a SPA app can access data on a Flask server, then the typical configuration is to build a VueJS SPA app using the CLI and Node, then deliver the compiled build directly from your web server (e.g. Apache, IIS). There's no reason to pipe the delivery of the SPA app via Flask, all that does is add a bunch of overhead.
使用Flask公开SPA应用程序可以调用的REST API(例如，使用AXIOS)以检索/写入数据等.
Use Flask to expose a REST API that your SPA app can call (e.g. using AXIOS) to retrieve/write data, etc.
这篇关于为带有Flask的简单vuejs页面提供服务(1个服务器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
