Serve simple vuejs page with flask (1 server)

问题

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.

With Firefox I get error for a disallowed type:

Loading module from “http://localhost:5000/static/App” was blocked because of a disallowed MIME type (“text/html”).

On Chrome I just get file not found since it tries to get the App file instead of App.vue.

Here is what I have:

<!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>

The myvue.js

import App from './App.vue'

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

The app.vue (simply got from another example on SO):

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

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)

回答1:

It doesn't really make sense to serve a Vue SPA app from Flask to my mind. What are you actually trying to achieve?

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.

Use Flask to expose a REST API that your SPA app can call (e.g. using AXIOS) to retrieve/write data, etc.

来源：https://stackoverflow.com/questions/63712664/serve-simple-vuejs-page-with-flask-1-server

标签

Vue.js

Flask