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

修行者对6662024-02-29 12:32

构建后，浏览器不执行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