flask 蓝图和vue冲突_我怎样才能将Vue.js和Flask结合起来？

I want to use Vue.js and Flask together: Vue.js for a dynamic front-end, and Flask for the back-end. How can I do that?

解决方案

I recently had this problem (combining Vue.js and Flask).

There are at least two ways to combine them, depending on whether you're creating 1) a simple Vue.js app or 2) a more-complicated Vue.js app that needs to use a module bundler like Webpack to combine Single-File Components or npm packages.

Simple Vue.js app:

This is actually fairly easy and very powerful on its own. The steps below may not be the 'best practice' way to do it, but it will get you started:

If you want the Vue.js functionality (the "app") to be on its own page, create a new template .html file. Otherwise just open whatever .html template file you want the app to be in.

This is where your Vue.js template code will go.

Create a new JavaScript file in your static folder, name it after this app you want to create.

This is where your Vue.js JavaScript code will go.

At the bottom of the .html template file include a script tag to include Vue.js.

Note that that version number will change, so don't just copy that line. You can get the link for the most-recent version here.

Also in that template file, also at the bottom, include a script tag to load the JavaScript file you just created.

Create a new div in the .html template file that has an id of app.

Serve the page as usual. / Render the template file as usual.

If you want, use a Vue.js 2.0 Hello World JSFiddle to do some quicker prototyping, and then copy the code over into your .html and .js files.

Make sure that the fiddle is using the most-recent version of Vue.js!

Easy!

More-complicated Vue.js app using Webpack:

What I did for this was to create a server folder and a client folder, where the server folder contains my Flask server code, and the client folder contains my Vue.js project code (I created a Webpack project using vue-cli). When I want to combine my Vue.js project with my Flask project, I run npm run build from within the client folder, which generates an app.html file and several static files (JavaScript and CSS). I set up my Webpack config so that the app.html file is created in my Flask server/templates folder, and the static JavaScript and CSS needed by app.html is created in a server/static/app/ folder, isolated from the static assets used by the non-Vue portions of my Flask app.

The exact changes I made to my Webpack config (via my git commit):

client/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({

- filename: 'index.html',

- template: 'index.html',

+ filename: 'app.html',

+ template: 'app.html',

Here (above) I'm changing the name of the Vue.js 'launch' file to app.html so that it doesn't conflict with my Flask app's 'index.html'.

client/config/index.js:

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',

Here (above) I'm setting where the app.html file and static assets should be created.

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',

Here (above) I'm just renaming the 'launch' page, same as in webpack.dev.conf.js.

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')

Here (above) is my render function. I'm using Flask's Blueprints feature (.route) but you don't have to.