vue项目打包部署到flask等后端服务里面,实现前后端不分离部署,解决空白页面和刷新页面not fount问题

  1. 编译模式一定要设置为esnext,否则会报错:

Strict MIME type checking is enforced for module scripts per HTML spec.Expected a JavaScript module script but the server responded with a MIME type of "text/plain".

具体解释可以看vite官方文档:构建选项 | Vite 官方中文文档

2.而且路由模式要改为hash模式:

import {
    createRouter,
    createWebHistory,
    createWebHashHistory,
    RouteRecordRaw,
} from 'vue-router'

// 全局路由
const router = createRouter({
    history: createWebHashHistory(), // 路由模式:history模式
    routes: routes,
})

3.flask的模板文件放置

flask项目根目录要有templates文件夹和static文件夹,用于存储vue打包后的模板文件和静态文件

在flask中映射模板文件:

python 复制代码
from flask import Flask, jsonify, request, render_template

app = Flask(__name__, static_url_path='/',
            static_folder='static', template_folder='templates')


@app.route("/")
def index():
    return render_template("index.html")


# @app.route("/v1/server/nfcadduser", methods=["POST"])
# def add_user_nfc():
#     data_json = request.form  # 获取POST请求中的data参数
#     print(f"接收到的请求参数是: {data_json}")
#     data = {
#         "code": 200,
#         "data": data_json,
#         "msg": "操作成功"
#     }
#     return jsonify(data)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=9080)
相关推荐
MarcoPage1 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发3 分钟前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
工业互联网专业12 分钟前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
**之火24 分钟前
Web Components 是什么
前端·web components
顾菁寒25 分钟前
WEB第二次作业
前端·css·html
前端宝哥26 分钟前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员
你好龙卷风!!!27 分钟前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
Ljw...1 小时前
Vue.js组件开发
vue.js
兔老大的胡萝卜1 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
齐 飞2 小时前
MongoDB笔记02-MongoDB基本常用命令
前端·数据库·笔记·后端·mongodb