我想一起使用Vue.js和Flask：Vue.js用于动态前端，Flask用于后端。我怎么能这样做？
答案 0 :(得分：26)
我最近遇到了这个问题（结合了Vue.js和Flask）。
至少有两种方法可以将它们组合起来，具体取决于您是否创建1）一个简单的Vue.js应用程序或2）一个更复杂的Vue.js应用程序需要使用像Webpack这样的模块捆绑包合并Single-File Components或npm包。
简单的Vue.js app：
这实际上非常简单且非常强大：
.html文件。否则，只需打开您希望应用程序所在的.html模板文件。
如果您将Vue.js JavaScript代码放在与HTML相同的文件中，那么下面就是一个简单的＆＃34; Hello World＆＃34;您可以使用示例模板来了解Flask模板文件中需要的内容：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
static文件夹中创建一个新的JavaScript文件，在您要创建此应用后命名。
.html模板文件的底部包含一个包含Vue.js的脚本标记。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script> div模板文件中创建.html id app的新<div id="app"></div>。
{{ }} 如果您使用Jinja2渲染模板，则需要添加几行代码以告知Jinja2不使用app.py语法来渲染变量，因为我们需要那些双卷曲-brace符号为Vue.js.以下是您需要添加到class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
variable_start_string='%%', # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
variable_end_string='%%',
))
app = CustomFlask(__name__) # This replaces your existing "app = Flask(__name__)"
执行此操作的代码：
.html.js和npm install -g @vue/cli文件中。
容易！
使用Webpack的更复杂的Vue.js应用
vue create my-project server client文件夹和server文件夹，其中client文件夹包含Flask服务器代码，app.html文件夹包含Vue.js项目代码。server/templates文件夹中创建app.html文件，并在server/static/app/中创建npm run build所需的静态JavaScript和CSS }文件夹，与Flask应用程序的非Vue部分使用的静态资产隔离。.html，这将生成client/build/webpack.dev.conf.js文件和多个静态文件（ JavaScript和CSS）。我对我的Webpack配置所做的确切更改（通过我的git commit）：
new HtmlWebpackPlugin({
- filename: 'index.html',
- template: 'index.html',
+ filename: 'app.html',
+ template: 'app.html',
：
client/config/index.js在这里（上图）我正在更改Vue.js的名称＆＃39;启动＆＃39;将文件发送到app.html，这样它就不会与我的Flask app＆＃39; index.html＆＃39;冲突。
module.exports = {
build: {
env: require('./prod.env'),
- index: path.resolve(__dirname, '../dist/index.html'),
- assetsRoot: path.resolve(__dirname, '../dist'),
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
+ index: path.resolve(__dirname, '../../server/templates/app.html'),
+ assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+ assetsSubDirectory: '',
+ assetsPublicPath: '/static/app',
：
/static/app/这里（上图）我设置了应该创建app.html文件和静态资源的位置。
因为我们指导Webpack在Flask＆＃34;静态＆＃34;内生成静态资产。文件夹（html）...
src=/static/app/js/app.f5b53b475d0a8ec9499e.js文件中这些资产的相对URL。
static/ /static/etc.文件夹中，Flask认为该文件夹中有app.html网址。
client/build/webpack.prod.conf.js文件。 new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
- ? 'index.html'
+ ? 'app.html'
: config.build.index,
- template: 'index.html',
+ template: 'app.html',
：
webpack.dev.conf.js在这里（上图）我只是重新命名＆＃39;发布＆＃39;页面，与routes.py中的相同。
@web_routes.route('/app')
@login_required
def app():
if current_user.datetime_subscription_valid_until < datetime.datetime.utcnow():
return redirect(url_for('web_routes.pay'))
return render_template('app.html')
：
<blueprint_name>.route这里（上图）是我的渲染功能。我使用了Flask的蓝图功能（{{1}}），但您不必这样做。
答案 1 :(得分：0)
使用vue-cli或Webpack时，可以简化过程。只需创建
vue.config.js在您的Vue项目中，请参见：Vue config
module.exports = {
outputDir: "../dist",
// relative to outputDir
assetsDir: "static"
};
然后配置烧瓶应用程序：
app.py
from flask import Flask, render_template
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/')
def index():
return render_template("index.html")
请注意，烧瓶static_folder和template_folder中的容器不能相同。