python中flask创建vue-cli3.X web项目，引入前端静态资源路径不对的问题解决方案

问题描述

在 vue-cli3.X 及以上版本中，通过 yarn run build 生成的 dist 文件夹中是 js 文件夹和 css 文件夹，而在 flask 的 web 项目中，run.py 中的 Flask(__name, static_folder="") 中的 static_folder 只能设置一个值，所以这个时候就会有静态资源引入不了的问题

问题解决

1、解铃还须系铃人

在 vue.config.js 文件中，设置assetsDir的值

assetsDir 字段解释

• Type: string
• Default: ''

放置生成的静态资源 (js、css、img、fonts) 的目录

module.exports = {
  assetsDir: 'static/'
}

此时 通过 yarn run build 生成的 dist 文件包含了index.html和static文件夹

2、run.py 中的配置

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

template_folder设置文件目录

static_folder设置静态资源目录

文件路径

.
├── README.md
├── __pycache__
│   └── run.cpython-37.pyc
├── babel.config.js
├── dist
│   ├── index.html
│   └── static
│       ├── css
│       │   └── app.5c9713c3.css
│       ├── favicon.ico
│       └── js
│           ├── about.39d1e3ad.js
│           ├── about.39d1e3ad.js.map
│           ├── app.7c95fbbc.js
│           ├── app.7c95fbbc.js.map
│           ├── chunk-vendors.de7b539e.js
│           └── chunk-vendors.de7b539e.js.map
├── package.json
├── public
│   ├── index.html
│   └── static
│       └── favicon.ico
├── run.py
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── about.vue
│   │   └── home.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
├── vue.config.js
└── yarn.lock