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
相关推荐
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
苏打水com9 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld9 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
嫂子的姐夫9 小时前
11-py调用js
javascript·爬虫·python·网络爬虫·爬山算法
Dajiaonew10 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
kakacc:10 小时前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
勤奋菲菲12 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
10年前端老司机12 小时前
面试官爱问的 Object.defineProperty,90%的人倒在这些细节上!
前端·javascript
徐小夕13 小时前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端