vue 部署到生产出现语法错误和css警告(Resource interpreted as Stylesheet but transferred with MIME type text/html: "www.aaa.com/cal/static/css/app.c06.css". vendor.4b6.js:1 Uncaught SyntaxError: Unexpected token '<')

记录工作中遇到比较奇怪和难排查的问题:打开前端vue项目,页面无任何反应

一、控制台报错:

1、Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://moli.lenovo.com/callcenter/static/css/app.e724dc7….css".

查询这个警告发现:css的文件的http下载请求返回不符合预期(想返回css层叠样式,结果返回了Index.html)。
2、vendor.4b69aca….js:1 Uncaught SyntaxError: Unexpected token '<'

查看了以上js文件发现,js文件的返回内容也是Index.html文件,故浏览器js引擎执行失败导致代码报错,无法继续向下执行。

3、bootstrap 0d6cc43…:54 Uncaught TypeError: Cannot read property 'call' of undefined at t (bootstrap 0d6cc43…:54) at Object.NHnr (AnswerProductInfoList.vue:27) at t (bootstrap 0d6cc43…:54) at window.webpackJsonp (bootstrap 0d6cc43…:25) at app.37fbacd….js:1

二、项目背景和部署环境:

负载均衡通过AWS 的 ELB实现,ElB分别可开启server1和server2服务,也可以同时开启server1和server2。目前server1的前端版本为2.6.8,server2的前端版本为2.7.0。由于目前同时开启了server1和server2。导致部分进入server2的用户,其静态文件(css/js)下载时,走的server1的服务,因为两台服务器的静态文件的版本号不一致,导致文件下载失败。返回了nginx映射的index.html文件内容。

解决方法:ELB同时开启server1和server2的前提条件应该是server1和server2的代码版本一致

排查问题参考连接:

https://www.it1352.com/562873.html

原文地址:https://www.cnblogs.com/wangweizhang/p/13529093.html