关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type.

问题描述:

• vite 项目 build 部署后在浏览器中访问出现以下报错：

• Expected a JavaScript module script but the server responded with a MIME type of "text/html"
• Strict MIME type checking is enforced for module scripts per HTML spec.

解决方案:

上述问题的原因在于：项目build后没有找到正确的静态资源路径，解决如下

// vite.config.js目录下，修改内容如下：
export default viteConfig = {
    base: '/'
}

原文：https://www.codeleading.com/article/34945983820/ 

 

我的项目中出现的问题

 

根本原因如上，项目中已经配置了这个base路径，接着项目中还出现了一个问题

当项目在已经在线上打开，然后在jenkins上重新打包部署之后，在页面不刷新的情况下，切换项目的菜单，依然会报这个错

原因是，之前打包引入的地址xxxx.js的content-type:application/script,而重新打包部署之后，在未刷新页面的情况下，js引入的依然是原先的地址，且content-type：text/html，导致报上述的错误

 

 

 

解决方式是：监听error，监听之后，提示刷新页面，在入口的index.html中

var showConfirm = true;
    var errorListener;
    if (window.addEventListener) {
      errorListener = window.addEventListener(
        'error',
        function (t) {
          console.log('t:', t);
          if (!t.message) {
            if (t.target.as === 'script' && showConfirm) {
              showConfirm = false;
              if (window.confirm('资源加载异常，请点击确定按钮刷新页面!')) {
                errorListener = null;
                window.removeEventListener('error', null);
                window.location.reload();
              }
            }
            var r,
              n = (r = t.target ? t.target : t.srcElement) && r.outerHTML;
            n && n.length > 200 && (n = n.slice(0, 200));
            var a = {
              type: 'resourceError',
              target: {
                outerHTML: n,
                src: r && r.src,
                tagName: r && r.tagName,
                id: r && r.id,
                className: r && r.className,
                name: r && r.name,
                type: r && r.type
              }
            };
            // TODO：埋点日志上报
            return;
            if (a.target.src && window.XMLHttpRequest) {
              var u = new XMLHttpRequest();
              u.open('OPTIONS', a.target.src);
              u.send();
              u.onload = function (e) {
                200 !== e.target.status && ((a.target.status = e.target.status), (a.target.statusText = e.target.statusText)), f(a);
              };
            }
          }
        },
        !0
      );
    }

 

 

与package.js同级，新建一个server.js

const express = require('express');
const path = require('path');
const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
const compression = require('compression');

const app = express();
const port = process.env.PORT || 8001;
// 修改port PORT=3999 && node server.js

const targetPath = 'dist';

app.use(compression());
// 基于http协议讲解Cache-Control在服务中的应用
// https://zhuanlan.zhihu.com/p/43414403
app.use((req, res, next) => {
  // 将 index.html 设为 no-cache
  if (req.url == '/') {
    res.setHeader('Cache-control', 'no-cache');
  }
  next();
});

app.use(
  express.static(path.join(__dirname, targetPath), {
    etag: false,
    maxAge: 1000 * 60 * 60 * 24 * 365 // 缓存一年
  })
);

app.get('/*', (req, res, next) => {
  if (req.url.startsWith('/api')) return next();
  res.status(404);
  res.sendFile(path.join(__dirname, targetPath, 'index.html'));
});

app.use(
  proxy('/api', {
    changeOrigin: true,
    ws: true,
    secure: false,
    target: 'http://smart-sadb.sec.wanmei.com'
  })
);

app.listen(port);
console.log('服务已开启');
console.log(`http://localhost:${port}`);