Question

我一般来说对Vue和现代Web开发还很陌生，所以我事先表示歉意。这是情况。

我正在尝试制作一个简单的Flask应用程序，该应用程序在前端使用Vue和Vuetify。当我查找有关如何将Flask与Vue结合使用的教程（例如one）时，它依赖于webpack，我可以使其正常运行。当我尝试根据其Quick start guide的说明将Vuetify添加到项目中时，我发现它要求您必须遵循Existing Applications指南，因为未使用vue-cli3初始化该项目（请参见错误报告） here）。我尝试按照这些说明进行操作，但经过几个小时的混乱却放弃了，没有结果。

在阅读了webpack之后，我决定对于我的特定应用程序，我可以负担不起不使用它的费用。因此，我回到了Vuetify快速入门指南，并按照New Applications的说明操作，启动了Flask，这就是我得到的：

127.0.0.1 - - [21/May/2019 18:31:20] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [21/May/2019 18:31:20] "GET /js/app.c12f4ec0.js HTTP/1.1" 404 -
127.0.0.1 - - [21/May/2019 18:31:20] "GET /css/chunk-vendors.b7bc2226.css HTTP/1.1" 404 -
127.0.0.1 - - [21/May/2019 18:31:20] "GET /js/chunk-vendors.2eb58769.js HTTP/1.1" 404 -
127.0.0.1 - - [21/May/2019 18:31:21] "GET /js/app.c12f4ec0.js HTTP/1.1" 404 -
127.0.0.1 - - [21/May/2019 18:38:22] "GET /index.html HTTP/1.1" 404 -

相关代码：

from flask import Flask, render_template

app = Flask(__name__,
            static_folder="./test/dist",
            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)

在大多数情况下，Vue代码只是一个安装了Vuetify的新项目。我所做的唯一更改是在main.js中，我更改了分隔符，以免与Jinja2冲突。

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  delimiters: ["[[", "]]"],
}).$mount('#app')

我的三个主要问题是：

Flask用于查找静态文件和模板文件的路径有什么问题？
是否可以在不带Webpack的情况下将Vue与Flask一起使用？
如果不可能的话，有人会做一个如何将Vuetify集成到基于Webpack的Vue项目中的方法吗？

提前谢谢！

Answer 1

我在Vue和Flask上有多个项目，并且发现webpack是最好的方法。我不喜欢Vue-CLI，因为在构建时很难指定本地文件和捆绑文件的路径。我知道一开始它是一条学习曲线，但是如果您花时间的话，则值得一两天。

您应该使用Flask-Webpack来允许flask找到已散列和捆绑在一起的资产。与一个webpack插件一起创建提供链接的清单JSON。使用Flask Webpack时，还需要直接指定文件夹路径。

我的webpack配置中有此设置：

const ManifestPlugin = require('webpack-manifest-plugin')
...
plugins: [
    new ManifestPlugin({
      writeToFileEmit: true,
      seed: {
        publicPath: '/'
      },
      generate: (seed, files) => ({
        ...seed,
        'assets': files.reduce((manifest, { name, path }) => ({ ...manifest, 
        [name]: path }), {})
      })
   })
]

这将创建一个manifest.json文件，如下所示：

{"assets":{"base_css.css":"static/css/base_css.1bf3ff18.css",
           "base_css.js":"static/js/base_css.1e6b291b.js",
           "chunk-vendors.js":"static/js/chunkvendors.f92da40c.js",},
 "publicPath":"/"}

设置好项目后，我认为使用npm和import将Vuetify添加到现有项目之后，这很简单。

请注意，使用Vue-Cli和/或Webpack时，您无法更改vue分隔符。在有关分隔符的API文档中：“限制：此选项仅在完整版本以及浏览器内编译中可用。”

但是最后一点应该没问题，因为您的html模板和vue模板将分别解耦，因此{{}}交叉点无关紧要，因为它们是上下文相关的。

Answer 2

好的，所以我找到了答案，结果比我想像的要容易得多。为了更轻松地复制我的步骤，我将从顶部开始。

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

现在，您基本上只需按照Vuetify Quick Start page的Existing Applications部分中的说明进行操作：

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)

index.html的

<head>部分

<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的build部分中，将Web pack输出其构建的目录更改为：

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

并弹出您的Web浏览器，您应该看到默认的Vue HelloWorld页面，并且Flask与Vue，Vuetify和Webpack集成在一起。

这是我感到困惑的地方。如果您遵循有关新Vuetify项目的说明并运行开发服务器，则它们将具有自己的自定义Hello World页面。但是，因为“ Hello World”页面仍然是默认的Vue页面，所以我认为这表示未安装Vuetify。真正发生的是它们具有不同的App.vue和HelloWorld.vue文件。如果将常规App.vue和HelloWorld.vue文件替换为Vuetify文件，请将logo.svg文件复制到资产文件夹中，然后重新运行开发服务器，您将获得Vuetify登陆页面。

无论如何，我觉得自己是个白痴，但是希望这可以帮助另外一个Flask / Vue / Vuetify / Webpack新手。

这是使用python 3.7.3和vue-cli 3.7.0完成的

如何在不使用webpack的情况下让Flask查看Vue构建文件？

2 个答案: