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)
相关推荐
盛夏绽放2 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao18 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo19 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er24 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年28 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er31 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing32 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客37 分钟前
gin如何返回html
前端·html·gin
islandzzzz44 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端1 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构