Problem description

In VUE-Cli3. X and above, the DIST folder generated by yarn Run build is the JS folder and CSS folder, while in Flask’s Web project, The static_folder in the Flask(__name, static_folder=””) of run.py can only be set to one value, so there is a problem where static resources cannot be introduced

Problem solving

The bell must also be a bell

In the vue.config.js file, set the value of assetsDir

assetsDirField to explain
  • Type: string
  • Default: ”

Directory where static resources (JS, CSS, IMG, fonts) are generated

module.exports = {
  assetsDir: 'static/'
}
Copy the code

In this case, the dist file generated by yarn Run build contains the index. HTML and static folder

2. Configuration in run.py

app = Flask(__name__,
            template_folder='./dist',
            static_folder='./dist/static')
Copy the code

Template_folder Sets the file directory

Static_folder Sets the static resource directory

The file path

. ├ ─ ─ the README. Md ├ ─ ─ __pycache__ │ └ ─ ─ the run, retaining - 37. Pyc ├ ─ ─ Babel. Config. Js ├ ─ ─ dist │ ├ ─ ─ index. The HTML │ └ ─ ─ the static │ ├ ─ ─ CSS │ │ └ ─ ─ app. 5 c9713c3. CSS │ ├ ─ ─ the favicon. Ico │ └ ─ ─ js │ ├ ─ ─ the about. 39 d1e3ad. Js │ ├ ─ ─ the about. 39 d1e3ad. Js. Map │ ├ ─ ─ App. 7 c95fbbc. Js │ ├ ─ ─ app. 7 c95fbbc. Js. Map │ ├ ─ ─ the chunk - vendors. De7b539e. Js │ └ ─ ─ the chunk - vendors. De7b539e. Js. Map ├ ─ ─ Package. The json ├ ─ ─ public │ ├ ─ ─ index. The HTML │ └ ─ ─ the static │ └ ─ ─ the favicon. Ico ├ ─ ─ run. Py ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ └ ─ ─ logo. PNG │ ├ ─ ─ components │ │ ├ ─ ─ the HelloWorld. Vue │ │ ├ ─ ─ the about the vue │ │ └ ─ ─ home. Vue │ ├ ─ ─ the main, js │ ├ ─ ─ the router │ │ └ ─ ─ index. Js │ ├ ─ ─ store │ │ └ ─ ─ index. The js │ └ ─ ─ views │ ├ ─ ─ the About the vue │ └ ─ ─ Home. Vue ├ ─ ─ vue. Config. Js └ ─ ─ yarn. The lockCopy the code