New to Vue here. Attempting to use
npm run build to run my app with Flask. It works except for images. When using
npm run dev (and not Flask) everything works fine including the images.
I think this has to do with the interplay between webpacks and Flask but I am too new at all of this to understand it.
My file structure is as follows:
|__TopLevelDirectory (I believe this is Vue's root directory) ----index.html (used by Vue development server) ----webpack.config.js ----package.json |__ dist ---- build.js(created running ```npm run build```) ---- various .jpg and .svg files copied here automatically by npm run build. |__ src (I believe this is Flask's root directory) ----app.py (Main Flask file) ----App.vue ----main.js ----routes.js |__ assets ----various .jpg and .svg files |__ components ---- various .vue files |__ store ----store.js (vuex store) |__ templates ----index.html (Copied here because Flask will look for it here I believe) |__ static ----favicon.ico ----|__ js ----build.js (copied here from /dist because Flask looks for it here I believe) ----mixins.js ----vue.js ----|__ styles ----main.css
Again, everything works fine using
npm run dev. In order to make things work in Flask I made a few changes:
- Copy index.html from /TopLevelDirectory to /TopLevelDirectory/src/templates
- Change paths referenced in /TopLevelDirectory/src/templates/index.html to reflect
/src being being the Flask-centric root directory instead of /TopLevelDirectory.
Then I “run” app.py as you would for any Flask app and navigate to 127.0.0.1:5000 on my local browser
and the app is displayed. The problem is that the images are not present on the page and I get 404 erros that look like this:
"GET /dist/someRandomPicture.jpg?a24e9c16e56801d6498b90299c09c18a HTTP/1.1" 404 -"
So, the server is looking in the /dist directory to find someRandomPicture.jpg.
someRandomPicture.jpg was automatically copied from /assets into /dist by the
npm run build.
How do I fix this?