Flask can't find asset(css, js…) files of Vue-built app

1
votes

I'm having an issue with vue's build settings and Flask's static_folder setting. I've tried several cases with Flask's static_folder setting, but the only one case among these three worked for me. And I can't see why.

// Build setting from vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/dist/'
        : '/'
}

So my index.html has asset files' src and href as:

<script src=/dist/js/app.f4f6d455.js></script>

Here are my trials and results.

Case 1: Error!

// Flask Setting
app = Flask(__name__, template_folder = "./dist")

//Directory Structure
/project
    /dist
        /js
            app.f4f6d455.js
        index.html
    flask.py

result: Failed to load resource > http://127.0.0.1:5000/dist/js/app.f4f6d455.js

Case 2: Error!

Copied assets into 'static/dist' since flask's default static_folder is 'static', and left dist folder intact to better clarify the error message.

// Flask Setting
app = Flask(__name__,
        template_folder = "./dist")

//Directory Structure
/project
    /dist
        /js
            app.f4f6d455.js
        index.html
    /static
        /dist
            /js
                app.f4f6d455.js
    flask.py

result: Failed to load resource > http://127.0.0.1:5000/dist/js/app.f4f6d455.js

Case 3: Works!

Changed flask's static_folder to 'dist'

// Flask Setting
app = Flask(__name__,
    static_folder = "dist",
    template_folder = "./dist")

//Directory Structure
/project
    /dist
        /js
            app.f4f6d455.js
        index.html
    flask.py

I assumed that it was the matter of the root path when Flask tries to find its asset files. But Case 3 worked when case 2 didn't. if the root path of case 2 were 'http://127.0.0.1:5000/static', then it should have worked. Could anyone help me to understand this?

Thanks in advance.

1
javascriptvue.jsflask
I think you might be getting mixed up with publicPath and outputDir. What URL path should be used to load the default page of your app? http://localhost:5000/ or http://localhost:5000/dist/? – Phil
@Phil Thanks for your comment. The default page is 'index.html' which is at 'project/dist/index.html', plus my flask app says '/project' is its app.root_path. – won suk J daily142857

1 Answers

1
votes

If you want the assets for your front-end app to be served from http://localhost:5000/dist, you need to configure the static_url_path in your Flask app to match

app = Flask(__name__, 
  static_folder="whatever-folder-you-want", 
  static_url_path="/dist")

You should also add a catch-all endpoint that routes all unmatched requests to your SPA

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file("index.html")

See https://flask.palletsprojects.com/en/1.1.x/patterns/singlepageapplications/

If you wanted to use Flask's default static folder and path, you would need to change your Vue config to

module.exports = {
  outputDir: "path/to/static", // the static folder in your Flask app
  publicPath: process.env.NODE_ENV === 'production'
    ? "/static/"
    : "/"
}

If you instead wanted to copy the dist folder into Flask's static folder after building your Vue app, change the publicPath to /static/dist/.

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? "/static/dist/"
    : "/"
}