python使用flask和vue开发前端web项目，静态资源路径引入出错的问题

问题描述

在 python 项目中，使用 flask 和 vue 创建和开发前端项目，在引入前端静态资源的时候，发现在 vue-cli3.x 及以上版本通过 yarn run build 打包之后，在 run.py 中引入路径不对

问题解决

在使用 vue-cli3.x 及以上版本生成的项目中，有个 public 文件夹，在此文件夹中有 index.html文件和一个 favicon.ico icon文件

1、在 public 文件夹中创建 static 文件夹

• 把 favicon.ico 放在 static 文件夹中
• 把自己所需的静态资源放在 static 中(例如 jquery)
• 修改 public 文件夹下的 index.html 文件中引入 icon 和 静态资源的路径

<link rel="icon" href="/static/favicon.ico">
<script src="/static/jquery.js"></script>

2、修改 vue.config.js 文件中 assetsDir 的值

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

• 通过 yarn run build 打包

3、在 run.py 文件中修改文件引入

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

template_folder 引入 html 文件路径 static_folder 引入 静态资源文件路径

文件路径

.
├── README.md
├── __pycache__
│   └── run.cpython-37.pyc
├── babel.config.js
├── dist
│   ├── index.html
│   └── static
│       ├── css
│       │   └── app.5c9713c3.css
│       ├── favicon.ico
│       ├── jquery.js
│       └── 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
│       └── jquery.js
├── 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