Flask + Vue开发web项目

直接运行的vue代码

直接运行的vue代码与flask代码之间的通信需要做跨域处理，跨域处理（这里只说vue这边）也有两种，一种是直接在访问的url前加flask的url，我的前后端通信用的是axios，这里贴出处理代码

import axios from 'axios'

axios.defaults.baseURL = 'http:127.0.0.1:5600' //在这里设置后端url
axios.defaults.timeout = 60 * 1000

export async function axiosRequest(configs) {
  const result= { status: false, data: null }
  await axios(configs)
    .then(function(res) {
      result.status = true
      result.data = res.data
    })
    .catch(function(error) {
      //错误处理
    })
  return result
}

另外一种是在vue.config.js中设置

module.exports = {
	devServer:{
		proxy: 'http:127.0.0.1:5600'
	}
}

编译的vue代码

编译的vue代码上面两种方式都不需要，只需要编译后的文件结构符合flask即可。
首先，将vue.config.js的编译的静态资源目录修改为static

module.exports = {
  assetsDir: 'static'
}

其次，将编译好的目录直接放到flask项目下，并将flask的template的指向修改为自己的。改了之后的代码以及结构如下图