Хорошо, так что я нашел ответ, и оказалось, что это было намного проще, чем я это делал. Чтобы было проще повторить мои шаги, я собираюсь начать сверху.
app.py
from flask import Flask, render_template
app = Flask(__name__,
static_folder="./test/dist", # place that webpack builds to
template_folder="./test/dist")
@app.route('/')
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5000, debug=True)
В том же каталоге, что и app.py, выполните следующие команды (при условии, что у вас уже установлен vue-cli):
$ vue init webpack vue-app-name
$ cd vue-app-name
$ yarn add vuetify # or use npm install vuetify --save
Теперь вы просто следуете инструкциям из раздела Existing Applications страницы быстрого запуска Vuetify :
Top of main.js
import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
Vue.config.productionTip = false
Vue.use(Vuetify)
<head> раздел index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>frontend</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
</head>
И, наконец, в разделе сборки файла index.js измените каталог, в котором веб-пакет выводит свою сборку:
// Template for index.html
index: path.resolve(__dirname, '../../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../dist'),
На этом этапе, если вы запустите
$ yarn build # or npm run build
$ cd ..
$ python app.py
и откройте ваш веб-браузер, вы должны увидеть страницу Vue HelloWorld по умолчанию, и у вас есть Flask, работающий с Vue, Vuetify и webpack все в одном.
Здесь я запутался. Если вы следуете инструкциям для нового проекта Vuetify и запускаете сервер dev, у них есть собственная настраиваемая страница Hello World. Однако, поскольку страница Hello World по-прежнему была страницей Vue по умолчанию, я понял, что Vuetify не был установлен. На самом деле происходит то, что у них разные файлы App.vue и HelloWorld.vue. Если вы замените обычные файлы App.vue и HelloWorld.vue на файлы Vuetify, скопируете файл logo.svg в папку активов и перезапустите сервер dev, вы получите целевую страницу Vuetify.
В любом случае, я чувствую себя идиотом, но, надеюсь, это поможет другому новичку Flask / Vue / Vuetify / Webpack.
Это было сделано с использованием python 3.7.3 и vue-cli 3.7.0