flask+Vue(Vite)部署,js文件不能被正确解析解决方案

构建后,浏览器不执行js文件,触发错误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".​

问题原因

构建后,因为生产环境index.html​文件中<script>​标签使用了type="module"​,而服务器对于js文件的类型返回的是text/plain​,类型不一致,其详细解释可见.mjs 与 .js

解决方案一

手动修改index.562b9b5a.js​文件后缀为.mjs​,并将其对应的文件引用中文件名做相应更改(可能不止限于index.html​文件中)

缺点:麻烦,容易引起其他错误

解决方案二

配置Vite构建时不使用import​,如设置build.target​为edge15​,详细信息见Vite文档

缺点:强行降低版本可能导致构建失败解决方案三(推荐)

对js文件更改响应头,在flask中插入代码

复制代码
#更改js文件的返回头
@app.after_request
def changeHeader(response):
    disposition = response.get_wsgi_headers('environ').get(
        'Content-Disposition')  or ''#获取返回头文件名描述,如'inline; filename=index.562b9b5a.js'
    if disposition.rfind('.js') == len(disposition) - 3:
        response.mimetype = 'application/javascript'
    return response
相关推荐
小小爱大王1 天前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往1 天前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
还是大剑师兰特1 天前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle1 天前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
用户47949283569151 天前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头1 天前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化
披萨心肠1 天前
理解JavaScript中的函数参数传递
前端·javascript
一点七加一1 天前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
Fantastic_sj1 天前
JavaScript 数组方法和属性详解
javascript
JA+1 天前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js